There are three ways to handle JavaScript events: 1. HTML event handler, add the event handler directly in the HTML code, the syntax is "<element event=event function...>"; 2. DOM0 level event handler, for the specified object To add event processing, the syntax is "element object.event=function(){...}"; 3. DOM2-level event handlers are also added to specific objects and are mainly used to handle the operations of specifying and deleting event handlers.
The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.
3 Ways to Use Javascript Event Handlers
When an event occurs, we have to handle it. There are three main methods of Javascript event handlers:
1. HTML event handler
That is, we add event handlers directly in the HTML code, such as the following code:
<input id="btn" value="Button" type="button" onclick="showmsg();"> <script> function showmsg(){ alert("HTML added event handling"); } </script>From the above code, we can see that event processing is directly nested in the element. This has a problem: the coupling between the HTML code and js is too strong. If one day you want to change the showmsg in js, then not only do you have to If you modify it in js, you also need to modify it in html. We can accept one or two modifications, but when your code reaches the level of 10,000 lines, modification will require a lot of time and money. Therefore, we do not recommend this method.
2. DOM level 0 event handler
That is to add event processing for the specified object, look at the following piece of code:
<input id="btn" value="Button" type="button"> <script> var btn= document.getElementById("btn"); btn.onclick=function(){ alert("DOM level added event processing" ); } btn.onclick=null;//If you want to delete the click event of btn, just set it to null</script>From the above code, we can see that compared to HTML event handlers, DOM level 0 events, the coupling between HTML code and js code has been greatly reduced. However, smart programmers are still not satisfied and hope to find a simpler way to deal with it. Let's look at the third way to deal with it.
3. DOM2 level event handler
DOM2 also adds event handlers to specific objects, but mainly involves two methods for handling the operations of specifying and removing event handlers: addEventListener() and removeEventListener(). They all receive three parameters: the name of the event to be handled, the function as the event handler, and a Boolean value (whether to handle the event in the capture phase), look at the following piece of code:
<input id="btn" value="Button" type="button"> <script> var btn=document.getElementById("btn"); btn.addEventListener("click",showmsg,false);//Here we are Set the last value to false, that is, it will not be processed in the capture stage. Generally speaking, bubbling processing has better compatibility in various browsers. function showmsg(){ alert("DOM level added event handler"); } btn.removeEventListener ("click",showmsg,false);//If you want to delete this event, just pass in the same parameters</script>Here we can see that when adding and deleting event processing, the last method is more direct and simplest. However, Ma Haixiang reminds everyone that when processing the deletion event, the parameters passed in must be consistent with the previous parameters, otherwise the deletion will be invalid!
Expand your knowledge:
Event flow describes the order in which events are received on a page. In the early days of browser development, the two major browser manufacturers IE and Netscape were at odds with each other, which led to a frustrating situation. That is, their interpretations of event flow were completely different. Opposite definition. That is what we are familiar with: IE's event bubbling, Netscape's event capture. Let’s take a picture first and briefly look at the structure:
1. Event bubbling
Event bubbling means that the event is initially received by the most specific element (the node with the deepest nesting level in the document), and then propagates upward to the least specific node (the document). Take the above picture to illustrate, when the text part is clicked, it is first received by the element at the text, and then propagated to the window step by step, that is, the process of 6-7-8-9-10 is executed.
2. Event capture
Event capture means that the event is received by the less specific node first, and the most specific node receives the event last. Similarly, in the above model, when the text part is clicked, it is first received by the window and then propagated to the text element step by step, that is, the process of 1-2-3-4-5 is executed.