(It should be noted that div must be placed in front of js)
Generally speaking, if a dom object is bound to the same event, only the last one will take effect, for example:
The code copy is as follows:
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
Then only method3 will take effect.
If it is a Mozilla series, use addEventListener to enable multiple events to be implemented in order, such as:
The code copy 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);
Execution order is method1->method2->method3
If it is an ie series, attachEvent can enable multiple events to be implemented in order, such as:
The code copy is as follows:
var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick", method2);
btn1Obj.attachEvent("onclick", method3);
Execution order is method3->method2->method1
=============================================================================
In Mozilla:
How to use addEventListener
target.addEventListener(type, listener, useCapture);
target: Document node, document, window, or XMLHttpRequest.
type: string, event name, does not contain "on", such as "click", "mouseover", "keydown", etc.
listener: implements the EventListener interface or a function in JavaScript.
useCapture: Whether to use capture, generally use 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, containing "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 also support removing specified events. The purpose is to remove set events. The formats are as follows:
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 addingEventListener() function:
The code copy is as follows:
addEventListener(event,function,capture/bubble);
The parameter event is 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. Bubble first finds the specified location and then executes the event.
The parameters of capture/bubble are boolean values, True means to use capture, and False means to bubble. Windows Internet Explorer also has formulated an EventHandler, which is attachedEvent(), with the format as follows:
The code copy is as follows:
window.attachEvent("submit",myFunction());
What's more special is that attachEvent does not need to specify the capture/bubble parameters, because in Windows IE environment, the Bubble mode is used.
How to determine which listening type is supported? like:
The code copy is as follows:
if (typeof window.addEventListener != “undefined”) {
window.addEventListener("load",rollover,false);
} else {
window.attachEvent("onload",rollover)
}
The above typeof window.addEventListener != "undefined" program code can determine whether the user's browser supports the AddEventListener event model. If it is not supported, attachEvent will be used.
W3C and IE also 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);