Events in JavaScript

The events in JavaScript have three knowledge, one is the event flow, the other is the event handler, and the third is the event object. Here is my personal understanding of the three aspects of the content.

First, the event flow

Event flow refers to events that are triggered in a certain order. It has two sequences, namely top-down and bottom-up.

Top-down is called event capture, and event capture refers to the processing of events starting at the root of the DOM hierarchy, rather than starting with the target element that triggers the event, which is passed down from all ancestor elements of the target element sequentially. In this process, events are captured from the document root to the elements of each inheritance derivation between the event target elements, and if the event listener is registered with the Usecapture property set to True, then they can be assigned to any element of the period to handle the event; The event is then passed to the next element on the path of the derived element until the target element. When the event reaches the target element, it then bubbles through the DOM node.

The bottom-up is called event bubbling, when an event is triggered on a DOM element, such as when the user clicks on the client's name node, the event will bubble through the entire DOM node hierarchy as each parent node inherits from the node, until it encounters a node attached to the event type processor, The event is the onclick event. The bubbling of events can be terminated at any time during the bubbling process, which can be done by invoking the Stoppropagation () method on the event object on the Internet Explorer can be set by setting the event object's Cancelbubble property to True. If you do not stop the propagation of an event, the event continues to bubble through the DOM until it reaches the document root.

Second, event handlers

An event handler is a program that is executed after an event is captured, and it has three different ways.

1, HTML-level event handlers, that is, in the HTML tag directly into the event handler. As shown below:

<span style= "Font-family:microsoft Yahei;" ><span style= "Font-family:microsoft Yahei;" ><input type= "button" value= "button" onclick= "alert (' Hello word! ')"/></span></span>

2, Dom0 level event handler, that is, assign a function to the handler property of an event. The code is as follows:

<span style= "Font-family:microsoft Yahei;" >var Element=document.getelementbyid (' button '); Element.onclick=function () {       alert (' Hello word! ');} </span>

3, Dom2-level event handlers, that is, by calling the DOM object's AddEventListener () method to register an event handler. The AddEventListener () method requires three parameters, namely, the event name, the function of the event handler, and the Usecapture, a bool type, when false for bubbling to get (from the Inside Out), and true for Capture mode (by an extrovert). When using the AddEventListener method, be aware that the event name does not prefix "on" with the AddEventListener The event handler added by the RemoveEventListener method can only be deleted by using the. With AddEventListener , you can add multiple identical event handlers to a DOM and execute them sequentially. The code is as follows:

<span style= "Font-family:microsoft Yahei;" >var Element=document.getelementbyid (' button '); Element.addeventlistener (' Click ', function () {alert (' Hello jim! ')} , false); Element.addeventlistener (' Click ', function () {alert (' Hello jack! ')},false);</span>

The AddEventListener method is not supported on browsers that do not follow the label, such as IE8 and the following versions of IE and opera browsers, which use the Attachevent method when registering event handlers. Delete Events use DetachEvent, which receive two parameters, each of which is the event name and function for event handling. It is important to note that when using these two methods, the event name must be prefixed with "on", otherwise it will not be recognized.

Third, the event object. An event object is generated when an event is triggered on the DOM: event. It contains the type of event, the coordinates of the mouse, and so on. We can use the event object target property to refer to the DOM object that triggered the event, and to get this object in IE8 and the following browsers by srcelement this property. The Stoppropragation method in the event object is to block event bubbling, the Preventdefault method blocks the default behavior, and to set the Event.cancelbubble=true block event bubbling in IE8 and the following browsers. Set Event.returnvalue=false to block the default behavior.

Events in JavaScript