Shulou(Shulou.com)06/03 Report--

This article mainly explains "A brief introduction to JavaScript event types". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "A brief introduction to JavaScript event types".

DOM event flow

DOM (document object Model) structure is a tree structure. When an HTML element produces an event, the event will propagate in a specific order between the element node and the root node, and the node through the path will receive the event. This propagation process can be called DOM event flow. There are two types of event sequence: event capture and event bubbling.

Bubble event (Event Bubbling)

This is the IE browser implementation of the event model, and it is the easiest to understand, at least the author thinks it is more practical. Bubbling, as the name implies, the event goes up like a bubble in the water to the top. From the DOM tree structure, it means that the event is passed up from the leaf node along the ancestor node to the root node; from the browser interface view HTML element arrangement level, it is understood that the event is passed from the most certain target element with subordinate relationship to the most uncertain target element. Bubbling technology. The basic idea of bubbling events, events start from a specific event target to the most uncertain event target.

Capture event (Event Capturing)

The implementation of Netscape, which is just the opposite of bubble, from the top element of the DOM tree to the most precise element, this event model is a bit confusing for developers (at least for me), because the intuitive understanding should be like bubble, and event delivery should start with the most certain element, that is, the event-generating element.

DOM standard event model

We have explained and compared the above two different event models. The DOM standard supports two event models, namely, capture events and bubble events, but capture events occur first. Both event flows trigger all objects in the DOM, starting with the document object and ending at the document object (most standards-compliant browsers continue to extend the event as snap / bubble to the window object).

The most unique nature of the DOM standard event model is that text nodes also trigger events (not in IE).

Event transmission

In order to better illustrate the principle of event flow in the DOM standard, we put it in the "event transfer" summary to explain it in more detail.

Obviously, if a click event listener is added to a hyperlink, the event listener will be executed when the link is clicked. But if the event listener is assigned to the p element that contains the link or to the document node at the top of the DOM tree, clicking the link will also trigger the event listener.

This is because events affect not only the target elements that are triggered, but also all elements along the DOM structure. This is what everyone is familiar with as event forwarding. The principle of event forwarding is clearly pointed out in the W3C event model. Event delivery can be divided into three stages.

(1)。 During the event capture (Capturing) phase, events are forwarded down the DOM tree, from each ancestor node of the target node to the target node. For example, if the user clicks a hyperlink, the click event is forwarded from the document node to the html element, the body element, and the p element that contains the link. During this process, the browser detects the capture event listener for the event and runs the event listener.

(2) in the target phase, the browser runs the event listener after finding the event listener that has been assigned to the target event. The target node is the DOM node that triggered the event. For example, if the user clicks a hyperlink, the link is the target node (the target node at this time is actually the text node within the hyperlink).

(3)。 During the Bubbling phase, events are forwarded up the DOM tree, accessing the ancestor node of the target element one by one to the document node. Every step of the process. Browsers will detect event listeners that are not capture event listeners and execute them.

Not all events go through the bubbling stage.

All events go through the capture phase and target phase, but some events skip the bubbling phase. For example, the focus event that gives the element input focus and the blur event that loses input focus do not bubble.

Event handles and event listeners

Event handle

Event handles (also known as event handlers, which DOM calls event listeners), and functions that are called in response to an event are called event handlers. Each event corresponds to an event handle, and when the program is executed, the corresponding function or statement is assigned to the event handle, and when the event occurs, the browser executes the specified function or statement, thus realizing the interaction between the web page content and the user operation. When the browser detects that an event occurs, it looks for whether the event handle corresponding to the event has been assigned, and if so, executes the event handle.

We think that the function that responds to the click event is the onclick event handler. Previously, event handlers were allocated in two ways: in JavaScript or in HTML. If you assign an event handler in JavaScript, you need to first obtain a reference to the object to be processed, and then assign the function to the corresponding event handler property. See a simple example:

Var link=document.getElementById ("mylink"); link.onclick=function () {alert ("I was clicked!");}

From the examples we have seen, we find that it is easy to use an event handle, but the event handler name must be lowercase, and the event handle can be assigned to the element only after the element has been loaded, otherwise there will be an exception. If you assign an event handle in HTML, you can set the event handler directly through the HTML property and include the appropriate script as the property value, for example:

After the HTML runs, click the red area, which is the innermost DIV. According to the above description, whether it is the DOM standard or IE, the listening function written directly in html is called when the event is bubbling and is passed all the way up from the innermost layer, so it will appear one after another:

Current is event_source current is div2 current is div1 current is div0 current is body

Add the following clips:

Var div2 = document.getElementById ('div2'); EventUtil.addHandler (div2,' click', function (event) {event = EventUtil.getEvent (event); EventUtil.stopPropagation (event);}, false)

When you click on the red area, according to the above instructions, during bubble bubbling processing, the event is stopped after it is passed to div2, so the elements in the upper layer of div2 are not notified, so they will appear one after another:

Current is event_source current is div2

In a browser that supports the DOM standard, add the following code:

Document.body.addEventListener ('click', function (event) {event.stopPropagation ();}, true); Thank you for your reading. The above is the content of "brief introduction of JavaScript event types". After the study of this article, I believe you have a deeper understanding of the brief introduction of JavaScript event types, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.