A brief discussion on several methods of Javascript event handlers_javascript skills

An event is some action performed by the user or the browser itself. For example, click and mouseover are the names of events. The function corresponding to an event is called an event handler (or event listener). There are several ways to specify handlers for events.
1: HTML event handler.
For example:

Copy code The code is as follows:

I believe this method is currently used more often by all of us, but specifying the event handler in html There are two disadvantages.
(1) First of all: there is a time difference problem. For this example, assuming that the show() function is defined below the button and at the bottom of the page, if the user clicks the button before the page parses the show() function, an error will occur;
(2) The second disadvantage is that html is tightly coupled with javascript code. If you want to change the time handler, you need to change two places: html code and javascript code.
As a result, many developers abandon HTML event handlers and instead use JavaScript to specify event handlers.
Two: Javascript designated event handler
Javascript designated event handler includes three methods:
(1): DOM level 0 event handler
Such as:

Copy code The code is as follows:

var btn=document.getElementById("mybtn"); //Get the Reference of the button
btn.onclick=function(){
alert('clicked');
alert(this.id); // mybtn

in this way The added event handler will be processed during the bubbling phase of the event flow.
Delete the event handler specified by the DOM0 level method:
btn.onclick=null; // Delete the event handler
}
(2):DOM2 level event handler
DOM2 level event Two methods are defined to handle the operation of specifying and removing event handlers: addEventListener() and removeEventListener(). These two methods are included in all DOM nodes, and they both accept 3 parameters: the name of the event to be handled, the function as the event handler, and a Boolean value. If the last parameter is true, it means that the event handler is called in the capture phase; if it is fasle, it means that the event handler is called in the bubbling phase.
For example:

Copy code The code is as follows:

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

Use DOM2 level The main benefit of event handlers is that you can add multiple event handlers.
For example:

Copy code The code is as follows:

var btn=document.getElementById( "mybtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.addEventListener("click",function (){
alert("hello world!");
},false);

Two event handlers are added here for the button. The two event handlers are fired in the order they occur.
Time handlers added through addEventListener() can only be removed using removeEventListener(). The parameters passed in when removing are the same as those used when adding. This also means that anonymous functions added through addEventListener() cannot be removed.
For example:

Copy code The code is as follows:

var btn=document.getElementById( "mybtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
//Remove
btn. removeEventListener("click",function(){ //Writing like this is useless (because the second time is a completely different function than the first time)
alert(this.id);
}, false);

Solution:

Copy the code The code is as follows:

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

btn.removeEventListener("click",hander,false); // Valid

Note: Our third parameter here is all false, which is added during the bubbling stage. In most cases, event handlers are added to the bubbling stage of the event flow, so as to maximize compatibility with various browsers.
3: IE event handler
IE implements two methods similar to those in DOM: attachEvent() and detachEvent(). Both methods accept the same two parameters: event handler name and event handler function. Since IE only supports time bubbling, all event handlers added through attachEvent() will be added to the bubbling stage.
For example:

Three:

Copy code The code is as follows:

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

Note: The first parameter of the attachEvent() function is "onclick", not "click" in the DOM's addEventListener(). The
attachEvent() method can also be used to add multiple event handlers to an element.
For example:

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!");
});

AttachEvent() is called twice here, adding two different event handlers for the same button . However, unlike DOM methods, these event handlers are not executed in the order in which they were added, but are fired in the reverse order. Click the button in this example: the first thing you see is "hello world", and then "clicked".
Events added using attachEvent() can be removed by detachEvent(), provided that the same parameter.

Copy code The code is as follows:

var btn=document.getElementById("mybtn");
var hander=function(){
alert("clicked");
}
btn.detachEvent("onclick",hander}); // Remove

The above three methods are currently the main event handler methods. When you see this, you will definitely think that since different browsers will have different differences, how to ensure cross-browser event handlers?
In order to handle events in a cross-browser manner, many developers use Javascript libraries that can isolate browser differences, and some developers develop the most appropriate event handling methods themselves.
An EventUtil object is provided here, which can be used to handle differences during browsing:

Copy code The code is as follows:

var EventUtil = {
addHandler: function(element, type, handler){ // This method accepts 3 parameters: the element to be operated on, the event name and the event handler function
if (element.addEventListener){ //Check whether the passed in element has a DOM2 level method
element.addEventListener(type, handler, false); // If it exists, use this method
} else if (element .addEvent){ // If there is an IE method
element.attachEvent("on" type, handler); // then use the IE method. Note that the event type here must be prefixed with "on".
} else { // The last possibility is to use DOM0 level
element["on" type] = hander;
}
},

removeHandler: function(element, type, handler){ // This method is to delete the previously added event handler
if (element.removeEventListener){ //Check whether the passed-in element exists DOM2 level method
element.removeEventListener(type, handler, false); // If it exists, use this method
} else if (element.detachEvent){ // If it exists, IE's method
element.detachEvent("on" type, handler); // Then use the IE method. Note that the event type here must be prefixed with "on".
} else { // The last possibility is to use DOM0 and methods (in modern browsers, the code here should not be executed)
element["on" type] = null;
}
}
};

You can use the EventUtil object as follows:

Copy codeThe code is as follows:

var btn =document.getElementById("mybtn");
var hander= function(){
alert("clicked");
};
//Omitted here Part of the code is omitted
EventUtil.addHandler(btn,"click",hander);
//Part of the code is omitted here
EventUtil.removeHandler(btn,"click",hander); //Before removal The added event handler

is visible. It is very convenient to use addHandler and removeHandler to add and remove event handlers.