Introduction to javascript event handlers_javascript skills

1. DOM level 0 event handler
Give a function value to an event handler attribute.
For example:

Copy code The code is as follows:

var btn = document.getElementById( "myBtn");
btn.onclick = funtion(){
alert(this.id); //"myBtn"
}

Delete event, btn.onclick = null;
-------------------------------------------------- ------------------------------------
2. DOM2 level event handler
First introduce the two methods defined by "DOM Level 2 Events", which are used to handle the operations of specifying and deleting event handlers:
addEventListener()
removeEventListener()
All DOM nodes Contains these two methods and accepts 3 parameters: the processing event name, the function as the event handler, and a Boolean value.
The last Boolean parameter, true: means calling the event handler in the capture phase; false: means calling the event handler in the bubbling stage.

Copy code The code is as follows:

var btn = document.getElementById("myBtn");
btn.addEventListener("click",funciton(){
alert(this.id);
},false);

Add event handler with DOM2 level method The main benefit is that multiple event handlers can be added.
For example:

Copy code The code is as follows:

var btn = document.getElementById( "myBtn");
btn.addEventListener("click",funciton(){
alert(this.id);
},false);
btn.addEventListener("click",funciton (){
alert(“Hello World!”);
},false);

These two events will be triggered in order.
Events added through addEventListener() can only be removed using removeEventListener(). The parameters passed in when removing must be consistent with the parameters when adding, which means that the anonymous function cannot be removed.

Copy code The code is as follows:

var btn = document.getElementById("myBtn");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click" , handler , false);
btn.removeEventListener("click ", handler, false);

In most cases, event handlers are added to the bubbling phase of the event flow to be compatible with various browsers.
Firefox, safari, chrome, and opera support DOM2-level event handlers.
-------------------------------------------------- ----------------------------------
3. IE event handler
IE implements two methods similar to those in the DOM:
attachEvent()
detachEvent()
Both methods accept two parameters: event handler name and event handler function.
Since IE only supports time bubbling, event handlers added through attachEvent() will be added to the bubbling phase.
For example:

Copy code The code is as follows:

var btn = document.getElementById( "myBtn");
btn.attachEvent("onclick" , function(){
alert("Clicked");
})

Note that attachEvent() The first parameter is "onclick", not "click".
The main difference between IE's attachEvent() and DOM0's addEventListener() is the scope of the event handler.
DOM0 level method, the event handler will run in the scope of the element it belongs to;
attachEvent() method, the event handler will run in the global scope, so this is equal to window.
attachEvent() can also add multiple event handlers to an element.

Copy code The code is as follows:

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick" , function(){
alert("clicked");
})
btn.attachEvent("onclick" , function(){
alert( "Hello World!");
})

Unlike DOM methods, these event handlers are not executed in the order they were added, but in the opposite direction.
The usage of detachEvent() is the same as the usage of removeEventListener().
-------------------------------------------------- ----------------------------------
4. Cross-browser event handler

Copy code The code is as follows:

var EventUtil = {
addHandler : function( element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if ( element.attachEvent){
element.attachEvent( "on" type , handler)
} else {
element["on" type] = handler;
}
},
removeHandler: function( element , type , handler){
if ( element.removeElementListener) {
element.removeElementListener( type , handler , flase);
} else if ( element.detachEvent) {
element.detachEvent ( "on" type , handler)
} else {
element["on" type] = handler;
}
}
}