Home > Developer > JavaScript
An event is a specific interaction moment that occurs in a document or in a browser window.
An event is an action performed by the user or the browser itself, such as Click,load and MouseOver, which are the names of the events.
Events are a bridge between JavaScript and the DOM.
If you trigger, I execute--the event occurs, and the handler function that invokes it executes the corresponding JavaScript code to give the response.
Typical examples are: The Load event is triggered when the page loads, and the user clicks on the element to trigger the Click event.
Ii. Flow of eventsThe event flow describes the order in which events are received from the page.
1. Event Flow PerceptualQuestion: Click on the page element, what kind of element can sense such an event?
Answer: When you click an element, you also click the element's container element, even the entire page.
Example: There are three concentric circles, add corresponding event handler function to each circle, and pop up the corresponding text. Click the innermost circle and also click the Outer Circle, so the outside circle's Click event will also be triggered.
View CodeThe effect is as follows:
2. Event FlowWhen an event occurs, it propagates in a particular order between the element node and the root node, and all nodes that pass through the path receive the event, which is the DOM event stream.
1. Two kinds of event flow modelsThe order of event propagation corresponds to the two event flow models of the browser: The capture-type event stream and the bubbling event stream.
Bubbling Event Flow : The propagation of events is from the most specific event target to the least specific event target . That is, from the leaves of the DOM tree to the root. "Recommended"
Capture-type event flow : The propagation of events is from the most specific event target to the most specific event target . That is, from the root of the DOM tree to the leaves.
The idea of event capture is that less specific nodes should receive the event earlier, and the most specific node receives the event at the end.
<! DOCTYPE html>In the above HTML code, click the <div> element in the page,
Click event Propagation Order in the bubbling event stream is <div>-"<body>-"-"document
Click event Propagation order in the captured event stream is document-"-"<body>-"<div>
Note:
1), all modern browsers support event bubbling, but slightly different in specific implementations:
Event bubbling Skips the
IE9, Firefox, Chrome, and Safari keep the event bubbling to the Window object.
2), IE9, Firefox, Chrome, Opera, and Safari all support event capture. Although the DOM standard requires events to propagate from the document object, these browsers start capturing events from the Window object.
3), because the old version of the browser is not supported, very few people use event capture. It is recommended to use event bubbling .
2. Dom Event FlowThe DOM standard uses capture + bubbling. Both event streams trigger all objects of the DOM, starting with the document object and ending at the Document object.
The DOM standard specifies that the event flow consists of three phases: the event capture phase, the target stage, and the event bubbling phase.
- Event Capture phase: The actual target (<div>) does not receive events during the capture phase. In the capture phase, the event stops from document to
- In the target phase: events occur on <div> and are processed. but event handling can be seen as part of the bubbling phase .
- Bubbling phase: The event is propagated back to the document.
Note:
1), although the "DOM2 level Event" Standard specification explicitly specifies that event targets are not involved in the event capture phase, events on event objects are triggered in IE9, Safari, Chrome, Firefox, and Opera9.5 and later in the capture phase. As a result, there are two opportunities to manipulate events above the target object.
2), not all events will go through the bubbling phase. All events are captured and in the target phase, but some events skip the bubbling phase: for example, the focus event that gets the input focus and the Blur event that loses the input focus.
Two chance to manipulate the event example above the target object:
View CodeThe operation effect is that will pop up 6 boxes, for the explanation principle I integrated into a diagram:
3. Event flow typical Application event agentIn traditional event handling, you need to add an event handler for each element . The JS event Proxy is a simple and effective technique that allows the event handler to be added to a parent element to avoid adding the event handler to multiple child elements .
1. Event AgentThe principle of the event agent is to use event bubbling and target elements, add the event handler to the parent element, wait for the child element event to bubble, and the parent element can determine which child element by target (ie is srcelement), and thus do the corresponding processing. For more information about target, refer to JavaScript events (iv) the public members (properties and methods) of the event, for example.
Traditional event handling, add event handlers for each element, with the following code:
View CodeThe event proxy is handled in the following code:
2. Benefits of event Broker<body><ul id= "Color-list" ><li>red</li><li>orange</li><li>yellow</ Li><li>green</li><li>blue</li><li>indigo</li><li>purple</li ></ul><script> (function () { var Colorlist=document.getelementbyid ("Color-list"); Colorlist.addeventlistener (' click ', Showcolor,false); function Showcolor (e) { e=e| | window.event; var targetelement=e.target| | e.srcelement; if (targetElement.nodeName.toLowerCase () = = = "Li") { alert (targetelement.innerhtml);}} ) ();</script></body>Summarize the benefits of the event broker:
3. Problem of Event Agent: "update20170502"
- Reduce the number of event handlers to one because the event processor is hosting memory, which improves performance. Imagine if you had a 100-row table, comparing the traditional way of binding an event handler for each cell and the event broker (that is, adding an event handler on the table), it was not difficult to conclude that the event broker did avoid some potential risks and improve performance.
- DOM updates do not need to rebind the event handlers because the event broker can take different approaches to different child elements. If you add additional child elements (A,SPAN,DIV, etc.), you can modify the event handler directly, no need to rebind the processor, and no need to iterate through the loop again.
The code is as follows: The event agent binds both Li and span, and when you click Span, both Li and span bubble.
Content of span in <li><span>li </span></li><script> $ (document). On (' Click ', ' Li ', Function (e) { alert (' Li Li '); }); $ (document). On (' click ', ' span ', function (e) { alert (' li span '); }) </script>Workaround:
Method One: Block bubbling in the event handler for span
$ (document). On (' click ', ' span ', function (e) { alert (' li span '); E.stoppropagation (); })Method Two: The target element is detected in the event handler of Li
4. An interesting application of event agent "update20170502"$ (document). On (' Click ', ' Li ', function (e) { if (e.target.nodename = = ' SPAN ') { e.stoppropagation (); return; } Alert (' Li Li ');When you click on a list, the corresponding index is output
Extended reading:<script> var ul=document.queryselector (' ul '); var lis=ul.queryselectorall (' ul Li '); Ul.addeventlistener (' click ', Function (e) { var target= e.target; if (target.nodeName.toUpperCase () = = = ' LI ') { alert ([].indexof.call (Lis,target)); } },false) </ Script>Third, event processing procedures
Four, IE event processing program
These two sections refer to the JavaScript event (ii) event handler
V. Event object
This section contains the JavaScript event (iii) Event object
Vi. Public members of event objects
This section contains the JavaScript event (iv) Public members (properties and methods)
Seven, mouse events
In this section, see the JavaScript event (v) Event type mouse event
Original link: http://www.cnblogs.com/starof/p/4066381.html
What is the JavaScript event stream?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
