Analysis of the difference between Javascript's addEventListener() and attachEvent()_javascript skills

In 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", "keydown", etc.
listener: implements the EventListener interface or a function in JavaScript.
useCapture: Whether to use capture, usually false. For example: document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

In IE:

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

W3C and IE both support removing specified events, purpose It is an event to remove settings. The formats are as follows:

W3C format:

removeEventListener(event, function, capture/bubble);

The format of Windows IE is as follows:

detachEvent(event, function);


target.addEventListener(type, listener, useCapture);
target document node, document, window or XMLHttpRequest.
type string, event name, excluding "on", such as "click", "mouseover", "keydown", etc.
listener implements the EventListener interface or a function in JavaScript.
useCapture Whether to use capture, you will understand after reading the event flow section later. Generally, use false
When an event is triggered, an Event object will be passed to the event handler, such as:
document.getElementById ("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
The browser versions adapted are different, and please pay attention during use
attachEvent method button onclick
addEventListener method button click used in IE
used in fox The principle of using both: the priority of execution can be different. The following examples are explained as follows:
attachEvent method, for a certain event Attach other processing events. (Mozilla series is not supported)
The addEventListener method is used in Mozilla series
Example: document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3; If written like this, then only medhot3 will be executed
Written like this:
var btn1Obj = document.getElementById("btn1"); //object .attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3); The execution order is method3->method2->method1
If it is the Mozilla series, this method is not supported, and you need to use addEventListener 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 order is method1->method2->method3
Example: (It should be noted that the div must be placed in front of js)

Copy code The code is as follows:

Click

> ;

从W3C的发展时间轴来看, DOM(Document Object Model)的模型可以分为两种, DOM 0 及 DOM 2. 从数字来看就可以知道DOM 0 当然是比较旧的协议, 我们可以从以下的表格来看:

DOM1 协定:

Event Name	Description
onblur()	The element has lost focus (that is, it is not selected by the user).
onchange0	The element has either changed (such as by typing into a text field) or the element has lost focus.
onclick0	The mouse has been clicked on an element.
ondblclick()	The mouse has been double-clicked on an element.
onfocus()	The element has gotten focus.
onkeydown()	A keyboard key has been pressed down (as opposed to released) while the element has focus.
onkeypress()	A keyboard key has been pressed while the element has focus.
onkeyup()	A keyboard key has been released while the element has focus.
onload()	The element has loaded (document, frameset, or image).
onmousedown()	A mouse button has been pressed.
onmousemove()	The mouse has been moved.
onmouseout()	The mouse has been moved off of or away from an element.
onmouseover()	The mouse has moved over an element.
onmouseup()	A mouse button has been released.
onreset()	The form element has been reset, such as when a form reset button is pressed.
onresize()	The window's size has been changed.
onselect()	The text of a form element has been selected.
onsubmit()	The form has been submitted.
onunload()	The document or frameset has been unloaded.

DOM2 的进化:

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 with the addEventListener() function:

addEventListener(event,function,capture/bubble);

The parameter event is as shown in the table above. Function is the function to be executed. Capture and bubble are two time modes formulated by W3C. Simply put, capture is to read the last line from the beginning of the document and then execute the event, while bubble It first searches for the specified location and then executes the event.
The parameter of capture/bubble is a Boolean value, True means capture, False means bubble. Windows Internet Explorer also has an EventHandler, which is attachEvent(), and the format is as follows:

window.attachEvent("submit",myFunction());

What is special is that attachEvent does not need to specify the capture/bubble parameters, because Bubble mode is used in the Windows IE environment. Here is an image Rollover example to show the usage of the event:

-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd ">

alt=”Home”>

alt=”About”>

alt =”Blog”>

> ;

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 both support removing specified events. The purpose is to remove set events. The formats are as follows:

W3C format:

removeEventListener(event,function,capture/bubble);

The format of Windows IE is as follows:

detachEvent(event,function);

Data reference: Chapter 14 - Browsers and JavaScript, JavaScript Step by Step, by Steve Suehring