Home > Developer > JavaScript
Related reading:
JavaScript Event Learning Summary (v) Event type mouse events in JS
Http://www.jb51.net/article/86259.htm
JavaScript Event Learning Summary (i) Event flow
Http://www.jb51.net/article/86261.htm
A summary of JavaScript event Learning (iv) Public members of events (properties and methods)
Http://www.jb51.net/article/86262.htm
A summary of JavaScript event Learning (ii) JS event handler
Http://www.jb51.net/article/86264.htm
JavaScript Event Learning Summary (iii) JS event object
I. Events
An event is an action performed by the user or the browser itself, such as Click,load and MouseOver, which is the name of the event.
Events are a bridge between JavaScript and Dom.
If you trigger, I execute--the event occurs, the handler function that calls it executes the corresponding JavaScript code to give a response.
Typical examples are: The Load event is triggered when the page loads, and the user clicks the element to trigger the Click event.
Ii. Flow of events
1, event flow perceptual knowledge
Question: When you click on a page element, what element can induce such an event?
Answer: When you click an element, you also click the element's container element, or even the entire page.
Example: There are three concentric circles, add the corresponding event handler function to each circle, pop the corresponding text. Click the innermost circle, and click the Outer Circle, so the click event on the outside circle is also triggered.
<! DOCTYPE html>
The effect is as follows:
2. Event Flow
When an event occurs, it is propagated in a particular order between the element node and the root node, and all nodes passing through the path receive the event, which is the DOM event stream.
The sequence of event propagation corresponds to two types of event flow models for browsers: captured event streams and bubbling event streams.
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.
captured event Flow: The propagation of events is from the least specific event target to the most specific event target. That is, from the root of the DOM tree to the leaf.
<! DOCTYPE html>
In the HTML code above, click the <div> element in the page,
Click event Propagation order in bubbling event flow <div>-"<body>-"
Click event Propagation order in capture event flow document-
Note
1, all modern browsers support event bubbling, but there is a slight difference in specific implementations:
Event bubbling in IE5.5 and earlier versions 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 that events be propagated from the Document object, these browsers start capturing events from the Window object.
3, because the old version of the browser does not support, very few people use event capture. It is recommended that event bubbling be used.
DOM Event Stream
The DOM standard uses capture + bubbling. Both event streams trigger all objects of the DOM, starting with the document object and ending with the Document object.
The DOM standard prescribes that the event flow consists of three phases: the event capture phase, the target phase, and the event bubbling phase.
Event Capture phase: The actual target (<div>) does not receive events during the capture phase. That is, during the capture phase, the event stops from document to
In the target phase: events occur and are processed on <div>. But event handling can be seen as part of the bubbling phase.
Bubbling phase: Events are propagated back to the document.
Note
1): The DOM standard stipulates that event capture phase captures involve event targets, but in IE9, Safari, Chrome, Firefox, and Opera9.5, and later, events on event objects are set off 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 focal point and the Blur event that loses the input focus.
Two chance to manipulate event examples above target objects:
<! DOCTYPE html>
Run the effect is will pop up 6 boxes, for the explanation principle I integrated into a diagram:
3, the typical application of event flow--event agent
In traditional event handling, you need to add an event handler for each element. The JS event Agent is a simple and effective technique by which an event handler can be added to a parent element to avoid adding an event handler to multiple child elements.
The principle of event agent is to use event bubbling and target element, add event handler to parent element, wait for child element event bubbling, and parent element can judge which child element by target (ie is srcelement), and do processing accordingly. For more on Target please refer to the JavaScript Event learning Summary (d) The public members (properties and methods) of the events below for example.
Traditional event handling, adding an event handler for each element, the code is as follows:
<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");
var colors=colorlist.getelementsbytagname ("Li");
for (Var i=0;i<colors.length;i++)
{
colors[i].addeventlistener (' click ', Showcolor,false);
function Showcolor (e)
{
e=e| | window.event;
var targetelement=e.target| | e.srcelement;
alert (targetelement.innerhtml);
}
) ();
</script>
</body>
How the event agent is handled, the code is as follows:
<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 agent:
A, reduce the number of event handlers to one, because the event handler is to host memory, which improves performance. Imagine if there is a 100-row table comparing the traditional way of binding event handlers for each cell and the event agent (i.e. adding an event handler to the table), it is not difficult to conclude that the event broker does avoid some potential risks and improves performance.
B, the DOM update does not need to rebind the event handler because the event agent can use different methods for different child elements. If additional child elements (A,SPAN,DIV, etc.) are added, the event handler function of the event agent can be modified directly, without the need to rebind the processor and not iterate again.
The above is a small part of the description of the JavaScript Event learning Summary (a) event flow related knowledge, I hope to help you!
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
