Content analysis of DOM event bindings in JavaScript

This article brings you the content of JavaScript in the DOM event binding content analysis, there is a certain reference value, the need for friends can refer to, I hope to help you.

DOM Level 2 Events

Element.addeventlistener (Type,handler,boolean)
The first value represents the event type and does not add on.
The second is a method of execution. (Event handler function)
The third value is a Boolean value that defaults to false and is executed only during the bubbling phase. True to perform during the capture phase

Element.removeeventlistener (Type,handler,boolean)
The first value represents the event type and does not add on.
The second is a method of execution. (Event handler function)
The third value is a Boolean value that defaults to false and is executed only during the bubbling phase. True to perform during the capture phase
Removes the event. Usage is consistent with AddEventListener.

Event bindings for element.attachevent (type,handler) ie.
Element.detachevent (type,handler) IE events are removed.
The first value represents the event type, plus on.
The second is a method of execution. (event handler function),
Since the event model of IE only has a bubbling model, only two values are used.

Add cross-browser event bindings

var  addevent = function (ele,type,handler) {    if (ele.addeventlistener) {        Ele.addeventlistener (type, Handler,false)    }else if (ele.attachevent) {        ele.attachevent ("on" +type,handler)    }else{        ele[' on ' + Type]=handler    }}addevent (btn, "click", Function () {Console.log ("click")})

To remove cross-browser bindings

function Removeevent (ele,type,handler) {    if (ele.removeeventlistener) {        Ele.removeeventlistener (type, Handler,false)    }    else if (ele.detachevent) {        ele.detachevent (' on ' +type,handler)    }    else{        ele[' on ' +type]=null    }} Removeevent (BTN, "click", Function () {Console.log ("click")})

DOM Level 0 Events
The on-property in HTML

<button id= "btn" onclick= "Console.log (1)" > OK </button><button id= "btn" onclick= "FN ()" > OK </ Button>

Characters in quotation marks are strings that can be executed
Because the HTML on-method makes the JS and HTML tightly coupled together, is not conducive to post-maintenance, so it is not recommended.

DOM Level 0 Events

var Btn=document.getelementbyid ("Btn") btn.onclick=function () {    console.log (1);} Btn.onclick=function () {    console.log (2);} 2

If you add the same event, the following overwrites the previous event