Two forms of JS event binding

Tag: Lis str Low version supports element compatible DIV pre Overlay

The first type:

Obj.on*=function () {}

var btn=document.getelementbyid (' mybtn '); Btn.onclick=function() {    alert ( 1);}

This method is often used to assign a function to an event handler.

Its advantages are simple and then have cross-browser advantages that are supported by all modern browsers.

If you want to cancel this form-bound event, you can set the value of the event handler property to null:

btn.onclick=null;  // To Delete an event handler

However, there is one drawback to this form of binding, which is that you cannot bind two events on the same object, as follows:

odiv1.onclick=function() {            alert (1);        } Odiv1.onclick=function() {            alert (2);        }                              // 2

The above code binds two events on the same object, and results in only 2, because the event that is bound later overwrites the previous event.

To bind two events or multiple events on an object at the same time, you need a second form of binding.

The second type:

This form is referred to as the "DOM2 level Event", which defines two methods: AddEventListener () and RemoveEventListener ().

They all accept 3 parameters:

First parameter: The name of the event type to be processed;

The second parameter: a function of the handler;

The third parameter: A Boolean value that indicates whether to capture, true to capture, and false to bubble.

Cases:

var btn=document.getelementbyid (' mybtn '); Btn.addeventlistener (' click ',function() {    alert (1);}, false);

Events added through AddEventListener () can only be removed by RemoveEventListener ().

In particular, it is important to note that the incoming anonymous function cannot be deleted, such as to remove the event of the code binding above.

Btn.removeeventlistener (' click ',function() {    alert (1);},false)

It is useless to write like this, but it is the same handler function that seems to be deleted, but it is actually two different functions, though long.

So it's usually written like this:

var btn=document.getelementbyid (' mybtn '); var show=function() {    alert (1);} Btn.addeventlistener (' Click ', Show,false); // btn.removeeventlistener (' click ', Show,false);

At the same time, it can bind multiple events on an object:

var show=function() {    alert (1);} var show2=function() {    alert (2);} Btn.addeventlistener (' Click ', Show,false);  // 1btn.addeventlistener (' Click ', Show2,false);  // 2

Compatible:

AddEventListener () and RemoveEventListener () do not support IE8 and the following versions, and for low-version ie, there are also two methods:

Attachevent () and DetachEvent (), they each receive two parameters: the event handler name and the event handler function.

Because IE8 and earlier versions only support event bubbling, event handlers added in this way will be added to the bubbling phase.

var btn=document.getelementbyid (' mybtn '); var show=function() {    alert (1);} Btn.attachevent (' onclick ', show); // btn.detachevent (' onclick ', show);

Similarly, the same parameter must be provided when deleting, that is, the incoming anonymous function cannot be deleted, as it is correctly written.

Note the event type name, plus ' on '.

It can also bind two events on an object, but the results are slightly different:

var btn=document.getelementbyid (' mybtn '); var show=function() {    alert (1);} var show2=function() {    alert (2);} Btn.attachevent (' onclick ', show);   // 1btn.attachevent (' onclick ', show2);  // 2

In IE8 and the following versions, this code can be executed, but the popup result is reversed, that is, the first pop 2, and then pop 1.

I test in IE9 and IE10, the result is a positive sequence, the first pop 1, and then pop 2.

IE11 does not support this method, nor does Chrome and Firefox support it.

Summarize!!!

Standard browser (including IE): Obj.addeventlistener (event name, event function, whether capture)

1. There is a capture

2. Event name not on

3. The order in which events are executed is a positive sequence

4.this points to the object that triggered the event

Ie:obj.attachEvent (event name, event function)

1. No capture

2. Event name has on

3. Sequence of event function execution: standard IE positive sequence, non-standard IE reverse order

4.this pointing to Window

This issue can be modified by the call () method.

Two forms of JS event binding