Summary of three methods for adding events in js

In js, if we want to add things such as div, we almost only use the following methods: onclick, DOM. onclick = function () {}, DOM. addEvent (), now there are a lot of things to add with jquery binding. I will find some related examples for your reference later in this article.

There are three main ways to add events in Javascript:

1. Write onclick = "fn ()" directly on the DOM Node ()"

In this way, JavaScript Functions are highly coupled with the corresponding DOM node. If you want to reuse them, it is not easy to reuse them. If you change them, it will crash and you need to find the corresponding DOM node.

2. Use DOM. onclick = function () {} In Javascript code to add events

The coupling problem is solved, but this method can only add one event to one DOM. If one DOM node corresponds to multiple events, there is no way to do so.

3. Use DOM. addEvent () in Javascript code to add events

This method is flexible. It not only solves the coupling problem, but also can add multiple events, but the code is slightly complicated. However, this method 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 binding

It is very convenient to bind events to Query, including bind, live, And one. It also helps you to separate some common events, such as The onclick event of the Control. When binding an onclick event, you only need

The Code is as follows:	Copy code
$ ("# TestButton"). click (function (){ Alert ("I'm Test Button "); });

In this way, The onclick event is bound to the testButton and the alert statement is executed. We can also use $ ("# testButton"). click (); to trigger this onclick event. Everything is very OK. The above is a bit sb. Next let's take a look at the cancellation event. JQuery has the unbind method, specifically used to cancel the binding, that is, to cancel the event. In the preceding example, you should use: $ ("# testButton "). unbind ("click"); well, it looks very good. If you have two click events, you can also use unbind ("click", fnName) to delete the binding of a specific function. Why is there a way to cancel a specific function? Let's take a look at the example below. We will find that javascript events are exactly the same as C # events. Event binding is a superposition (+ =) instead of overwriting.

The Code is as follows:	Copy code
Var Eat = function (){ Alert ("I want to eat "); } Var PayMoney = function (){ Alert ("pay first "); } JQuery (document). ready (function (){ $ ("# TestButton"). click (Eat ); $ ("# TestButton"). bind ("click", PayMoney ); });

Through the above example, we found that "I want to eat" will pop up and "pay first" will pop up, indicating that it is bound through onclick + = fn. Let's modify the ready method:

The Code is as follows:	Copy code
JQuery (document). ready (function (){ $ ("# TestButton"). click (Eat ); $ ("# TestButton"). unbind (); $ ("# TestButton"). bind ("click", PayMoney ); });

Another error occurred. If you click the button this time, you will only execute PayMoney and Eat. If you put unbind () behind bind, this button will not work. But what if I want to remove the bound PayMoney method? In this case, 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 actually the same as bind, but next you will see a bug (I don't know if it's counted). Let's get a close-up experience.

The 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>

Summary

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