Three methods of adding events in JS

There are three main ways to add JavaScript events:

First, write onclick= "FN ()" directly on the DOM node.

Such a strong coupling, JS function and the corresponding DOM node is strongly associated with, to reuse words are not easy to reuse, change words is a crash, to find the corresponding DOM node.

Ii. adding events in JavaScript code using dom.onclick=function () {}

Solves the problem of coupling, but this way you can only add an event to a DOM, and if a DOM node corresponds to multiple events, there is no way.

Iii. adding events using Dom.addevent () in JavaScript code

This is a flexible approach that solves both the coupling problem and the addition of multiple events, but the code is slightly more complex, but it is recommended

The code is as follows	Copy Code
function Addevent (obj,type,handle) { if (obj.attachevent) { Obj.attachevent (' on ' + type,handle); }else if (obj.addeventlistener) { Obj.addeventlistener (Type,handle,false); }else{ obj[' on ' + type] = handle; } }

jquery Event Bindings

The binding event for query is handy, with Bind, live, one, and it helps you get some common events out of the ordinary, such as the control's OnClick event, when we bind the onclick event, we only need

The code is as follows	Copy Code
$ ("#testButton"). Click (function () { Alert ("I ' m Test button"); });

That's it. We bind the OnClick event on the Testbutton button, executing the alert statement. We can also use $ ("#testButton"). Click () to trigger the OnClick event, everything is OK. The above is a bit SB, and then look at canceling the event. jquery has a Unbind method that specifically cancels the binding, which is to cancel the event and, following the example above, should use: $ ("#testButton"). Unbind ("click"); well, it looks very good, if you have 2 events in your click, You can also use Unbind ("click", FnName) to remove the binding of a particular function. Why is there a way to cancel a particular function, and we'll look at the example, and we'll find that the JavaScript event, like the C # event, is superimposed (+ =) rather than overwritten.

The code is as follows	Copy Code
var Eat = function () {             alert (" I want to eat ");        }              var Paymoney = function () {  & nbsp;          alert ("Pay first");        }              jQuery (document). Ready (function () {             $ ("#testButton"). Click (Eat);             $ ("#testButton"). Bind ("click", Paymoney);        });

Through the example above, we found that the first pop-up: "I want to eat" will then pop up "pay first", indicating that its binding is done through ONCLICK+=FN. We modify the next Ready method:      

code is as follows	copy code
jQuery (document). Ready (function () {                 $ ("#testButton"). Click (Eat);                $ ("#testButton"). Unbind ();                $ ("#testButton"). Bind ( "Click", Paymoney);           });

Error again, oh, this time click the button, will only perform Paymoney, will not perform eat, then if the unbind () placed behind the bind, so this button will not work. But what if I want to get rid of the binding Paymoney method? This time we should write:     

The code is as follows	Copy Code
JQuery (document). Ready (function () { $ ("#testButton"). Click (Eat); $ ("#testButton"). Bind ("click", Paymoney); $ ("#testButton"). Unbind ("click", Paymoney); });

Hey, it's the same as bind, but next you'll see a bug (I don't know if it's not), let's take a closer look at

code is as follows	copy code
: <input id= "Testbutton" type= "button" value= "Test button" onclick= "Eat ();"/> <script type= "Text/javascript" > JQuery (document). Ready (function () { $ ("#testButton"). Unbind ("click", Eat); $ ("#testButton"). Unbind (); $ ("#testButton"). Bind ("click", Paymoney); }); </script>

Summarize

jquery only upgrades these three things, and finally the same effect.