A sample introduction to the usage of addEventListener

(note that div must come before js)

In general, if you bind the same event to a dom object, only the last one will take effect, such as:

 
document.getElementById("btn").onclick = method1; 
document.getElementById("btn").onclick = method2; 
document.getElementById("btn").onclick = method3; 

So only method3 will take effect.

In the case of the Mozilla family, addEventListener enables multiple events to be implemented sequentially, such as:

 
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); 

Execution order: method1-> An - > method3

In the case of the ie series, multiple events can be implemented sequentially using attachEvent, for example:

 
var btn1Obj = document.getElementById("btn1"); 
//object.attachEvent(event,function); 
btn1Obj.attachEvent("onclick",method1); 
btn1Obj.attachEvent("onclick",method2); 
btn1Obj.attachEvent("onclick",method3); 

Execution order: method3-> An - > method1

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

In the Mozilla:

How addEventListener is used

Target. AddEventListener (type, the listener, useCapture);

Target: document node, document, window, or XMLHttpRequest.
Type: string, event name, without "on," such as "click," "mouseover," "keydown," and so on.
Listener: implements the EventListener interface or a function in the JavaScript.
UseCapture: whether or not to use a capture, usually false. For example: document.getelementbyid ("testText"). AddEventListener ("keydown", function (event) {alert(event.keycode); }, false);

IE:

Target. AttachEvent (type, the listener);
Target: document node, document, window, or XMLHttpRequest.
Type: string, event name, with "on", such as "onclick", "onmouseover", "onkeydown", and so on.
Listener: implements the EventListener interface or a function in the JavaScript. For example: the document. The getElementById (" TXT "). The attachEvent (" onclick ", the function (event) {alert (event. KeyCode); });

W3C and IE both support the removal of specified events. The purpose is to remove the set events. The format is as follows:

RemoveEventListener (event, the function, the capture/mercifully);

The format of Windows IE is as follows:

DetachEvent (event, function);

Evolution of DOM2:
DOM 0 Event The DOM Event 2 Onblur () The blur An onfocus () Focus. Onchange () change Onmouseover () mouseover Onmouseout () mouseout Onmousemove () mousemove Onmousedown () mousedown Onmouseup () mouseup The onclick () click Ondblclick () The dblclick Onkeydown () keydown Onkeyup () keyup Onkeypress () keypress Onsubmit () submit Onload () The load Onunload () unload

The new DOM2 usage can be observed by the function addEventListener() :

 
addEventListener(event,function,capture/bubble); 

The parameter event is shown in the above table. Function is the function to be executed. Capture and bubble are two time modes developed by W3C.
The capture/bubble parameter is the Boolean value, True means the capture, False means the bubble.Windows Internet Explorer also makes an EventHandler, which is attachEvent(). The format 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 the Windows IE environment.

How do you determine which eavesdropping is supported? Such as:

 
if (typeof window.addEventListener !=  " undefined " ) { 
window.addEventListener( " load " ,rollover,false); 
} else { 
window.attachEvent( " onload " ,rollover) 
} 

Typeof window.addEventListener! = the "undefined" program code determines whether the user's browser supports the AddEventListener event model, and if not, USES attachEvent.

W3C and IE both support the removal of specified events. The purpose is to remove the set events. The format is as follows:

The W3C formats:

RemoveEventListener (event, the function, the capture/mercifully);

The format of Windows IE is as follows:

DetachEvent (event, function);