JavaScript event processing methods (3) _ javascript skills

Recently, because I have to modify my website and make special effects for my website every day, I read a lot of js contact events and I only use a small part of them. Sometimes I am confused when using them, now the system has been sorted out. I would like to share with you the script home platform for your reference. Recently, many js contact events have been read due to the daily modification of the website and special effects for the website, I will only use a small part of it myself, and sometimes it is quite confusing to use it. Now I have sorted out the system and want to share it with the platform for your reference!

1. What is a JavaScript event?

Events are the heart of JavaScript applications and the glue that sticks everything together. When we interact with some types of Web pages in the browser, the Event occurs.

An event may occur in a Web browser when a user clicks or clicks a specific element or presses some buttons on the keyboard, for example, if a Web page is loaded, you can scroll through the window or change the window size. To put it bluntly, an event is a specific interaction moment in a document or browser!

By using JavaScript, You can monitor the occurrence of specific events and specify that some events occur to respond to these events.

Ii. event stream

The event stream describes the order in which events are accepted on the page. At the early stage of browser development, two browser vendors, IE and Netscape, were stunned, that is, their interpretation of the event stream has two opposite definitions. That is, we are familiar with IE event bubbling and Netscape event capturing. First, let's take a look at the structure:

1. Event bubbling

Event bubbling means that an event is first received by the most specific element (the node with the deepest nesting level in the document), and then spread to the least specific node (document) step by step ). The figure above shows that when you click the text part, it is first received by the elements in the text area, and then spread to the window step by step, that is, the process of running 6-7-8-9-10 is executed.

2. Event capture

Event capture means that an event is first received by an unspecified node, and the most specific node finally receives the event. Similarly, in the above model, when the text part is clicked, it is first received by the window, and then gradually transmitted to the text element, that is, the process of 1-2-3-4 is executed.

What is the specific expression in the code? Later!

Iii. Three Javascript event handler Methods

When an event is generated, we need to process it. There are three main methods for Javascript Event Handlers:

1. HTML event processing program

That is, we directly add an event handler in the HTML code, as shown in the following code:

Script function showmsg () {alert ("HTML add event processing");} script

From the code above, we can see that event processing is directly nested in the element, so there is a problem: the coupling between html code and js is too strong, if you want to change the showmsg in js on any day, you must not only modify it in js, but also modify it in html. We can accept one or two modifications, however, when your code reaches the ten-line level, it will take a lot of money to modify. Therefore, we do not recommend this method.

2. DOM0-level event handler

Add event processing for the specified object. See the following code:

Script var btn = document. getElementById ("btn"); btn. onclick = function () {alert ("DOM-level add event processing");} btn. onclick = null; // if you want to delete the btn Click Event, set it to null to perform script

From the code above, we can see that the coupling between HTML code and js Code is greatly reduced compared with html event handling programs and DOM0-level events. However, smart programmers are still not satisfied with the situation and want to find a simpler processing method. Next, let's look at the third method.

3. DOM2-level event handler

DOM2 also adds an event handler to a specific object, but it mainly involves two methods for processing operations on the specified and deleted Event Handlers: addEventListener () and removeEventListener (). They all receive three parameters: the name of the event to be processed, the function used as the event handler, and a Boolean value (whether to process the event in the capture phase). See the following code:

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 phase, generally, bubble processing has better compatibility in various browsers. 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 to script.

Here we can see that the last method is more direct and easier to add and delete events for processing. However, Ma haixiang reminds everyone that the input parameters must be consistent with the previous parameters during event deletion. Otherwise, deletion will become invalid!

Iv. Process and difference of event bubbling and event capture

Here, I will give you a bit of code to illustrate the process of event bubbling and event capture. At the same time, let us see the differences between the two:

　　　　　　 
 　　 Document　　 　　　　　　 
I am www.mahaixiang.cn
I like www.mahaixiang.cn
　　 
Script var p = document. getElementById ('P'); var c = document. getElementById ('C'); c. addEventListener ('click', function () {alert ('subnode capturing ')}, true); c. addEventListener ('click', function () {alert ('subnode bubbling ')}, false); p. addEventListener ('click', function () {alert ('parent node capturing ')}, true); p. addEventListener ('click', function () {alert ('parent node bubbling ')}, false); script 

Run the code above. When you click the child element, we will find that the execution sequence is: parent node capture-child node bubble-parent node bubble. In this example, we will understand that, in addition, the DOM2-level event requires three phases:

1. Event capture stage;

2. In the target stage;

3. Event bubbling stage.

The first is capture, and then in the target stage (that is, to the position where the event is triggered). The last is bubble. What is unscientific is that there is a DOM1-level event processing program, don't make a joke!

5. Supplement

1. the IE event handler should also add events to attachEvent () and detachEvent () to delete events. The two methods receive the same two parameters: the event handler name and the event handler function. Why is there no Boolean value here? Because ie8 and earlier versions only support event bubbling, the default value of the last parameter is false! (IE and opera are browsers that support the IE event processing program ).

2. an event object is an object used to record the relevant information when an event occurs. However, an event object is generated only when an event occurs and can only be accessed within an event processing function, after all event processing functions are completed, the event object will be destroyed!

The above is a small Editor to introduce you to the JavaScript event processing methods (three), I hope to help you!