JavaScript Event handling methods (three) _javascript tips

Recently this time because every day to modify the site, for the site to do special effects, so see a lot of JS contact events, they will only use a small part of the time is also more chaotic, and now the system of sorting, hereby share to the cloud Habitat Community Platform for your reference!

One, what is a JavaScript event?

Event is the heartbeat of the JavaScript application and the glue that sticks everything together, and it happens when we interact with some type of Web page in the browser.

An event can be a user clicking on something, a specific element of the mouse, or pressing some key on the keyboard, and the event may be something that happens in a Web browser, such as when a Web page is loaded or the user scrolls the window or changes the window size. To be blunt, an event is a specific interactive moment that occurs in a document or browser!

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

Ii. Flow of events

The event flow describes the order in which the events are accepted in the page, and in the early days of the browser's development, two big browser makers IE and Netscape pinched each other, and there was a situation in which their interpretation of the flow of events appeared in two diametrically opposed definitions. That is what we are familiar with: IE event bubbling, Netscape event capture. First come to a picture, briefly look at the structure:

1. Event bubbling

Event bubbling is when the event is first received by the most specific element (the node with the deepest nesting level in the document) and then propagated up to the least specific node (document). The above diagram shows that when you click on the text section, first by the text of the elements received, and then spread to window, that is, the implementation of the 6-7-8-9-10 process.

2. Event Capture

Event capture is when the event was first received by a less specific node, and the most specific node received the event at the end. Similarly, in the above model, is to click the text section, first by the window to receive, and then spread to the text element, that is, the process of executing the 1-2-3-4-5.

How does it behave in the code? Give me the back!

Three, 3 ways to JavaScript event handlers

We're going to have to deal with the event. JavaScript event handlers have 3 main ways:

1. HTML Event handlers

That is, we add an event handler directly to the HTML code, such as the following code:

<input id= "btn" value= button "type=" buttons "onclick=" showmsg (); "　　 >
<script>
function showmsg () {
alert ("HTML add event Handling");
}

From the above code we can see that the event processing is directly nested in the element, so there is a problem: HTML code and JS coupling is too strong, if the day to change JS ShowMsg, then not only to be modified in JS, but also to the HTML to modify, One or two changes we can accept, but when your code to reach the million line level, the changes will need to waste, so, this way we do not recommend use.

2, DOM0 level event handler

To add event handling for the specified object, look at the following code:

<input id= "btn" value= "button" type= "button" >
<script>
var btn= document.getelementbyid ("btn"); 
   
     Btn.onclick=function () {
alert ("Dom-Level Add event Handling"); 
btn.onclick=null;//If you want to delete a BTN Click event, set it to null

   

From the above code, we can see that, relative to the HTML event handler, DOM0-level events, HTML code and JS code coupling has been greatly reduced. However, the smart programmer is still not satisfied, looking for a simpler way to deal with, the next step to see the third approach.

3, DOM2 level event handler

DOM2 also adds event handlers to specific objects, but it mainly involves two methods for handling the actions that specify and delete event handlers: AddEventListener () and RemoveEventListener (). They all receive three parameters: the event name to be handled, the function as the event handler, and a Boolean value (whether the event is handled during the capture phase), look at 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, not in the capture phase, where the bubbling is generally
compatible
with the browser　　 function ShowMsg () {
alert ("Add event handler at DOM level");
Btn.removeeventlistener ("click", Showmsg,false);//If you want to delete this event, just pass in the same parameter
</script>

Here we can see that the last method is more direct and easiest when adding deletion event processing. But Ma Haixiang remind you to note that in the removal of event processing, the incoming parameters must be consistent with the previous parameters, or delete will be invalidated!

Iv. process and distinction of event bubbling and event capture

Here, let's give you a little bit of code to illustrate the flow of event bubbling and event capture, but also lets you see the difference between the two:

 <!doctype html>  
 

Run the above code, click on the child elements, we will find that the implementation of the order is: the parent node capture--child node capture--child node bubbling--the parent node bubbling. From this example, you will understand that, in addition, the DOM2 level event includes three stages:

1, the event capture stage;

2, in the target stage;

3, event bubbling stage.

First is the capture, and then in the target phase (that is, came to the issue of the location of the event), the last is bubbling, unscientific, incredibly wood has a DOM1 level event handling procedures, everyone attention, don't make jokes!

V. Supplementary

1. IE event handlers also have two methods: Attachevent () Add events, detachevent () Delete events, two methods receive the same two parameters: event handler name and Thing handler function. Why is there no boolean value here? Because IE8 and earlier versions only support event bubbling, the last parameter defaults to the equivalent of false to handle! (Browsers that support IE event handlers have Ie,opera).

2. Event objects are objects that are used to record information about events, but the event objects only occur when an event occurs, and can only be accessed internally by an event-handler function, and the event object is destroyed after all event-handler functions have been run.

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