Examples of addEventListener usage

(Note that the div must be placed in front of js)

Generally, If you bind a dom object to the same event, only the last event will take effect. For example:
Copy codeThe Code is as follows:
Document. getElementById ("btn"). onclick = method1;
Document. getElementById ("btn"). onclick = method2;
Document. getElementById ("btn"). onclick = method3;

Only method3 takes effect.

For the Mozilla series, you can use addEventListener to implement multiple events in order, for example:
Copy codeThe Code is as follows:
Var btn1Obj = document. getElementById ("btn1 ");
// Element. addEventListener (type, listener, useCapture );
Btn1Obj. addEventListener ("click", method1, false );
Btn1Obj. addEventListener ("click", method2, false );
Btn1Obj. addEventListener ("click", method3, false );

The execution sequence is method1-> method2-> method3

For the ie series, you can use attachEvent to implement multiple events in order, for example:
Copy codeThe Code is as follows:
Var btn1Obj = document. getElementById ("btn1 ");
// Object. attachEvent (event, function );
Btn1Obj. attachEvent ("onclick", method1 );
Btn1Obj. attachEvent ("onclick", method2 );
Btn1Obj. attachEvent ("onclick", method3 );

The execution sequence is method3-> method2-> method1

========================================================== ====================

Mozilla:

How to Use addEventListener

Target. addEventListener (type, listener, useCapture );

Target: document node, document, window, or XMLHttpRequest.
Type: String, event name, excluding "on", such as "click", "mouseover", and "keydown.
Listener: implements the EventListener interface or functions in JavaScript.
UseCapture: whether to use capture. Generally, false is used. For example, document. getElementById ("testText"). addEventListener ("keydown", function (event) {alert (event. keyCode) ;}, false );

IE:

Target. attachEvent (type, listener );
Target: document node, document, window, or XMLHttpRequest.
Type: String, event name, including "on", such as "onclick", "onmouseover", and "onkeydown.
Listener: implements the EventListener interface or functions in JavaScript. For example, document. getElementById ("txt"). attachEvent ("onclick", function (event) {alert (event. keyCode );});

W3C and IE support removing specified events at the same time. The purpose is to remove the specified events in the following format:

RemoveEventListener (event, function, capture/bubble );

The format of Windows IE is as follows:

DetachEvent (event, function );

DOM2 evolution:

DOM 0 Event	DOM 2 Event
Onblur ()	Blur
Onfocus ()	Focus
Onchange ()	Change
Onmouseover ()	Mouseover
Onmouseout ()	Mouseout
Onmousemove ()	Mousemove
Onmousedown ()	Mousedown
Onmouseup ()	Mouseup
Onclick ()	Click
Ondblclick ()	Dblclick
Onkeydown ()	Keydown
Onkeyup ()	Keyup
Onkeypress ()	Keypress
Onsubmit ()	Submit
Onload ()	Load
Onunload ()	Unload

The new DOM2 usage can be observed by the addEventListener () function:
Copy codeThe Code is as follows:
AddEventListener (event, function, capture/bubble );

The event parameter is shown in the table above. function is the function to be executed. capture and bubble are two time modes set by W3C respectively. In short, capture is to read the last row from the beginning of the document, then execute the event, while bubble searches for the specified location before executing the event.
The capture/bubble parameter is a Boolean value. True indicates capture. False indicates bubble. Windows Internet Explorer also has an EventHandler, Which is attachEvent (). The format is as follows:
Copy codeThe Code is as follows:
Window. attachEvent ("submit", myFunction ());

In particular, attachEvent does not need to specify the capture/bubble parameter, because the Bubble mode is used in windows IE environment.

How can I determine which listeners are supported? For example:
Copy codeThe Code is as follows:
If (typeof window. addEventListener! = "Undefined "){
Window. addEventListener ("load", rolover, false );
} Else {
Window. attachEvent ("onload", rolover)
}

The above typeof window. addEventListener! = "Undefined" program code can determine whether the user's browser supports the AddEventListener event model. If not, use attachEvent.

W3C and IE support removing specified events at the same time. The purpose is to remove the specified events in the following format:

W3C format:

RemoveEventListener (event, function, capture/bubble );

The format of Windows IE is as follows:

DetachEvent (event, function );