Recently, because I have to modify the website every day to make special effects for the website, I have watched a lot of JS contact incidents. I only know how to use a small part of it. Sometimes it is also quite chaotic when I use it. Now I have sorted it out. I will share it with the Wulin Network platform for your reference!
1. What is a JavaScript event?
Events are the beating heart of JavaScript applications and the glue that glues everything together. When we have certain types of interactions with web pages in the browser, events happen.
Events may be clicking on certain content, passing through a specific element, or pressing certain keys on the keyboard, and events may also be something that happens in a web browser, such as a certain web page loading, or the user scrolling the window or changing the window size. To put it bluntly, events are specific interaction moments that occur in a document or browser!
By using JavaScript, you can listen to specific events and specify that certain events occur in response to them.
2. Event flow
Event flow describes the order of events accepted in the page. In the early stages of browser development, two major browser manufacturers IE and Netscape fought each other, and a cheating situation occurred, that is, their interpretation of event flow showed two completely opposite definitions. That is what we are familiar with: IE event bubbles, Netscape event capture. Let’s take a picture first and take a brief look at the structure:
1. Event bubbles
Event bubbles means that the event is first received by the most specific element (the node with the deepest nesting level in the document), and then propagates up step by step to the least specific node (the document). Take the above diagram to illustrate that when clicking on the text part, it is first received by the element at the text, and then propagates 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 first received by a less specific node, and the most specific node finally receives the event. Similarly, in the above model, when clicking on the text part, it is first received by the window, and then propagates to the text element step by step, that is, the process of 1-2-3-4-5 is executed.
How does it perform in the code? Given later!
3. Three ways to handle Javascript event
When an event occurs, we have to deal with it. There are three main ways to handle Javascript event handlers:
1. HTML event handler
That is, we directly add event handlers to the HTML code, such as the following code:
<input id="btn" value="button" type="button" onclick="showmsg();"> <script> function showmsg(){ alert("HTML Add Event Processing"); } </script>From the above code, we can see that event processing is directly nested in elements. There is a problem with this: the coupling between html code and js is too strong. If you want to change showmsg in js one day, then you not only need to modify it in js, but 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, it will cost the people and money to modify it. Therefore, we do not recommend this method.
2. DOM0 level event handler
That is, add event processing to the specified object, see the following code:
<input id="btn" value="button" type="button"> <script> var btn= document.getElementById("btn"); btn.onclick=function(){ alert("DOM-level addition event processing"); } btn.onclick=null;//If you want to delete btn's click event, set it to null</script>From the above code, we can see that the coupling between DOM0-level events, html code and js code has been greatly reduced compared to HTML event handlers. However, smart programmers are still not satisfied and hope to find a simpler way to deal with it. Let’s take a look at the third method.
3. DOM2 level event handler
DOM2 is also adding event handlers to specific objects, but it mainly involves two methods, which are used to handle operations of specifying and deleting event handlers: addEventListener() and removeEventListener(). They all receive three parameters: the event name to be processed, the function as the event handler, and a boolean value (whether the event is processed in the capture stage), see the following code:
<input id="btn" value="button" type="button"> <script> var btn=document.getElementById("btn"); btn.addEventListener("click",showmsg,false);//Here we set the last value to false, that is, it is not processed in the capture stage. Generally speaking, bubble processing is more compatible in each browser function showmsg(){ alert("DOM-level add event handler"); } btn.removeEventListener("click",showmsg,false);//If you want to delete this event, you only need to pass the same parameter</script>Here we can see that when adding and removing events, the last method is more direct and simplest. However, Ma Haixiang reminds everyone that when processing the delete event, the passed parameters must be consistent with the previous parameters, otherwise the deletion will be invalid!
4. The process and difference between event bubbles and event capture
Having said that, let me give you some code to explain the process of event bubbles and event capture, and at the same time let you see the difference between the two:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-"> <title>Document</title> <style> #p{width:px;height:px;border:px solid black;} #c{width:px;height:px;border:px solid red;} </style> </head> <body> <div id="p"> i am www.mahaixiang.cn <div id="c">i like www.mahaixiang.cn</div> </div> <script> var p = document.getElementById('p'); var c = document.getElementById('c'); c.addEventListener('click', function () { alert('child node capture') }, true); c.addEventListener('click', function () { alert('child node bubbles') }, false); p.addEventListener('click', function () { alert('child node bubbles') }, false); </script> </body></html>When running the above code and clicking on the child element, we will find that the order of execution is: parent node capture-child node capture-child node bubble-parent node bubble. From this example, we can understand that in addition, the DOM2 level event stipulates that events include three stages:
1. Event capture stage;
2. In the target stage;
3. The event bubble stage.
First, it is capture, then in the target stage (that is, to the location where the event is issued), and finally it is bubbled. What’s unscientific is that there is no DOM1-level event handling program. Please pay attention and stop making jokes!
5. Supplement
1. The IE event handler also has two methods: attachEvent() adds events and detachEvent() deletes events. These two methods receive the same two parameters: the event handler name and the transaction processing function. Why is there no boolean value here? Because ie8 and earlier versions only support event bubbles, the last parameter is equivalent to false by default to handle! (The browsers that support IE event handlers include IE, opera).
2. Event objects are objects used to record relevant information when some events occur, but event objects will only be generated when events occur, and can only be accessed internally by the event handler function. After all event handler functions are run, the event object is destroyed!
The above is the way to handle JavaScript events (three types) introduced to you by the editor. I hope it will be helpful to you!