Details about event processing in javascript _ javascript tips-js tutorial

This article mainly introduces javascript event processing. For more information, see I. Event propagation Mechanism

The client JavaScript Program (that is, the browser) adopts the asynchronous event-driven programming model. When something interesting happens to documents, browsers, elements, or related objects, Web browsers generate events ). If JavaScript applications focus on specific types of events, they can register one or more functions to be called when such events occur. Of course, this style is not unique to Web programming. All applications that use graphical user interfaces use it.

Since we need to explain how to handle events, let's start with several basic concepts:

　　　　① Event type ):Is a string used to indicate the type of event. For example, "mousemove" indicates that the user moves the mouse, and "keydown" indicates that a key on the keyboard is pressed. The event type is only a string, and is sometimes called the event name );

　　　　② Event target ):Is an event or related object. Window, Document, and Element objects are the most common event targets. Of course, the XMLHttpRequest object in AJAX is also an event target;

　　　　③ Event handler ):Is a function that processes or responds to events. It is also called an event listener ). Applications register their event handler functions in a Web browser by specifying the event type and event target.

　　　　④ Event object ):Is an object related to a specific event and contains detailed information about the event. The event object is passed as a parameter to the event handler (but in IE8 and earlier versions, the global variable event is the event object ). Event objects can be used to specify the type attribute of the event type and the target attribute of the event target (but in IE8 and earlier versions, use srcElement instead of target ). Of course, different types of events define some other unique attributes for their related event objects. For example, a mouse event object contains the coordinates of the mouse pointer, and a keyboard event object contains detailed information about the pressed key and the secondary key.

The above four basic concepts have been completed. The problem arises-if you click a child element B of Element a on a web page, should we first execute the event handler registered by child element B, or should we first execute the event handler registered by element a (assuming that both Element a and its child element B have an event handler registered )? Have you ever thought about this question as a reader?

This problem involves the event propagation mechanism in the browser. I believe you have heard of event bubble and event capturing! Yes, they are the event propagation mechanism in the browser. No picture, no truth, no matching picture? How can we broaden the scope:

After reading the figure, I believe you have probably understood the event propagation mechanism in the browser: when an event occurs, it will first pass down from the browser's top-level Object Window, always pass to the element that triggers this event, which is the event capture process. However, everything is not over, and the event is passed all the way from this element to the Window object, which is the event Bubbling Process (but in IE8 and earlier versions, the event model does not define the capture process, only the bubble process ).

Therefore, for the above question, we have to check whether the event handler registered by element a is in the capture or bubble process. So what is registering an event handler during the capture process and registering an event handler During the bubble process? So let's talk about several methods to register the event handler:

1. Set the HTML Tag attribute to the event handler

The event handler attribute of the document element. Its name consists of "on" followed by the event name, such as onclick and onmouseover. Of course, this form can only register Event Handlers for DOM elements. Instance:

 
  Test  
P1
P2
P3