<!doctype html>
<meta charset= "Utf-8" >
<title> test</title>
<script src= "./jquery-1.10.2.js" type= "Text/javascript" ></script>
<script>
function initevents () {
Registering multiple Event method initialization
Initonevent ();
Initbindevent ();
Initclickvent ();
Initliveevent ();
Register only one event method
Oneeventbybindunbind ();
Oneevnetbydielive ();
}
function Initonevent () {
Register a click event for the ID onwaytoevent button
$ ("#onWayToEvent"). On ("click", Function () {
Alert ("This was one on event")
});
$ ("#onWayToEvent"). On ("click", Function () {
Alert ("This is both on event")
});
$ ("#onWayToEvent"). On ("click", Function () {
Alert ("This was three on event")
});
}
function Initbindevent () {
Register a Click event for a button with ID bindwaytoevent
$ ("#bindWayToEvent"). Bind ("click", Function () {
Alert ("This was registry event by Bind. One ")
});
$ ("#bindWayToEvent"). Bind ("click", Function () {
Alert ("This was registry event by Bind. ")
});
$ ("#bindWayToEvent"). Bind ("click", Function () {
Alert ("This was registry event by Bind. Three ")
});
}
function Initclickvent () {
$ ("#clickWayToEvent"). Click (function () {
Alert ("This was registry event by Click. One ");
});
$ ("#clickWayToEvent"). Click (function () {
Alert ("This was registry event by Click. ");
});
$ ("#clickWayToEvent"). Click (function () {
Alert ("This was registry event by Click. Three ");
});
}
function Initliveevent () {
$ ("#liveWayToEvent"). Live ("Click", Function () {
Alert ("This was registry event by Click. One ");
});
/*
$ ("#clickWayToEvent"). Click (function () {
Alert ("This was registry event by Click. ");
});
$ ("#clickWayToEvent"). Click (function () {
Alert ("This was registry event by Click. Three ");
});
*/
}
function Oneeventbybindunbind () {
Registrymanyevent ("Oneevnetbybind");
$ ("#oneEvnetByBind"). Unbind ("click"). Bind ("click", Function () {
Alert ("Only!!!!!!!");
});
}
function oneevnetbydielive () {
Registrymanyevent ("oneevnetbydielive");
$ ("#oneEvnetByDieLive"). Die (). Live ("Click", Function () {
Alert ("The One of You!!!!!!");
});
}
function registrymanyevent (ID) {
$ ("#" +id). Click (function () {
Alert ("This was registry event by common. One ");
});
$ ("#" +id). Click (function () {
Alert ("This was registry event by common. ");
});
$ ("#" +id). Click (function () {
Alert ("This was registry event by common. Three ");
});
}
</script>
<style>
. info{
width:100%;
Height:auto;
Float:auto;
margin:10px;
}
</style>
<body onload= "initevents ()" >
<button id= "onwaytoevent" > Register events multiple times via on </button> </br>
<div class= "Info" >
The event registered by the on method will not overwrite the original method with each registration. will be saved as a queue
When clicked, the trigger event will be executed in the order of registration.
Main code:
function Initonevent () {
Register a click event for the ID onwaytoevent button
$ ("#onWayToEvent"). On ("click", Function () {
Alert ("This was one on event")
});
$ ("#onWayToEvent"). On ("click", Function () {
Alert ("This is both on event")
});
$ ("#onWayToEvent"). On ("click", Function () {
Alert ("This was three on event")
});
}
</div>
<button id= "bindwaytoevent" > Register events multiple times via bind method </button>
<div class= "Info" >
The method of multiple registration through the Bind method of jquery is the same, it will not overwrite the original method, but also the method to
The queue is saved in the form of the event, and is executed one after the other by the registration order.
Main code:
function Initbindevent () {
Register a Click event for a button with ID bindwaytoevent
$ ("#bindWayToEvent"). Bind ("click", Function () {
Alert ("This was registry event by Bind. One ")
});
$ ("#bindWayToEvent"). Bind ("click", Function () {
Alert ("This was registry event by Bind. ")
});
$ ("#bindWayToEvent"). Bind ("click", Function () {
Alert ("This was registry event by Bind. Three ")
});
}
</div>
<button id= "clickwaytoevent" > Register events multiple times via the click Method </button>
<div class= "Info" >
< /span> Main code:
function Initclickvent () {
$ ("#clickWayToEvent"). Click (function () {
alert ("This is registry Event by Click. One ");
});
$ ("#clickWayToEvent"). Click ( function () {
alert ("This is registry event by click. ");
});
$ ("#clickWayToEvent"). Click (function () {
alert ("This was registry event by Click. Three ");
});
}
</div>
<button id= "livewaytoevent" > Register events multiple times through the Live method </button>
<div class= "Info" >
How do you want to overwrite the previous event, leaving only the last registered event method?
</div>
<button id= "Oneevnetbybind" > Unique registration of Events via Unbind,bind method </button>
<div class= "Info" >
This method can work.
Main code:
function Oneeventbybindunbind () {
Registrymanyevent ("Oneevnetbybind");
$ ("#oneEvnetByBind"). Unbind ("click"). Bind ("click", Function () {
Alert ("Only!!!!!!!");
});
}
function registrymanyevent (ID) {
$ ("#" +id). Click (function () {
Alert ("This was registry event by common. One ");
});
$ ("#" +id). Click (function () {
Alert ("This was registry event by common. ");
});
$ ("#" +id). Click (function () {
Alert ("This was registry event by common. Three ");
});
}
</div>
<button id= "oneevnetbydielive" > Unique loading of events via Die Live method </button>
<div class= "Info" >
The jquery-1.10.2.js we use here does not provide a die live method. This method is not available on the Internet.
Main code:
function oneevnetbydielive () {
Registrymanyevent ("oneevnetbydielive");
$ ("#oneEvnetByDieLive"). Die (). Live ("Click", Function () {
Alert ("The One of You!!!!!!");
});
}
function registrymanyevent (ID) {
$ ("#" +id). Click (function () {
Alert ("This was registry event by common. One ");
});
$ ("#" +id). Click (function () {
Alert ("This was registry event by common. ");
});
$ ("#" +id). Click (function () {
Alert ("This was registry event by common. Three ");
});
}
</div>
</body>
jquery Event registration and recurring event handling
