more compatible with these legacy issues. To be compatible, we have to understand the rationale, in addition to the dependency framework.
Dom Event three phases
When a DOM event is triggered, it is not simply triggered once on its own object, but it goes through three different stages:
1. Capture phase : First, the document root node documents to the event trigger object, from the outside to capture the event object;
2. Target stage : To reach
Event flow refers to the order in which events are received in the page, IE, Firefox, and Chrome browsers are event bubbling, which is called event bubbling, where events are first received by the most specific elements and then propagated up to the nodes that are not specific. Event capture is the opposite, event capture was proposed by Netscape, event bubbling
Examples of capturing and bubbling in JavaScript, and javascript bubbling
Capture/block capture, bubble/block bubbling in JavaScript
The event stream describes the sequence of events received from the page. The concept of event stream is exactly Internet Explorer and Netscape. However, the former proposes a common even
Binding Event Sequence in JS (difference between event bubbling and event capturing) and js bubbling
In JS, the default execution time of bound events is in the bubble stage, rather than in the capture stage (important). This is why when the parent class and subclass are bound to an event, first, the events bound to the subclass are called, and then the events of
The event flow describes the order in which events are received from the page. It is IE and Netscape that bring up the concept of the event flow, but the former is a common event bubbling stream, and the latter is the event capture stream.
The first part: event bubbling
That is, the event begins to be received by the most specific element, and then propagates up to the less specific node (document).
Here
Foreword: Although proficient in jquery, but not very familiar with its prototype JavaScript, recently encountered some difficulties in learning JavaScript, such as bubbling and capturing, many times mentioned, but do not know exactly where to apply. Find some good articles for your doubts and share them here.Quirksmode a series of articles are good, easy to understand, this article is just a series of one,
; --->
That is, during the event capture process, the document object receives the Click event First, and then the event goes down in the DOM tree and continues to propagate to the actual target of the event, the element. This is the event capture. And the event bubbling process, diametrically opposite.
Although the DOM2 level event specification requires events to propagate from the document object, most modern browsers start
both have an OnClick event handler function (event handler). If the user clicks Element 2, the click events for element 1 and element 2 are triggered. But which event is triggered first. Which event handler function will be executed first. In other words, the order in which events occur.
Two kinds of models
Predictably, Netscape and Microsoft had two distinct ways of dealing with the "horrible" (Browser wars) days: Netscape argued that element 1 was the first occurrence, and that the sequence o
click events should be HTML--Event captureNetscape proposes another event stream named event capturing. In contrast to event bubbling, events start from the outermost layer until the most specific element.In the above example, the order in which the Click event takes place under the concept of event capture should be the page, HTML--The third parameter of a AddEventListenerThe event streams specified in th
There are three stages in the DOM event flow: The event capture phase, the target stage, and the event bubbling phase. Event capture (dubbed bubbling): The popular understanding is that when a mouse clicks or triggers a DOM event, the browser will propagate the event from the root node, from outside to inside , i.e. cl
and ImpressionsEvent Flow: Describes the order in which events are accepted from the page. There are two types of event bubbling and event capture. Three phases of the DOM event stream:
event capture phase
in target phase
event bubbling stage
In the course of learning DOM events, we lear
The process of capturing and bubbling events is collectively referred to as the propagation of eventsThe propagation of events can be prevented:
In the Stoppropagation () method, use the
Set cancelbubble = True under IE;
In the process of capturing stoppropagation (), the subsequent bubbling process d
Events that are bound to clicked elements occur in code order, and other elements are bubbling or capturing "perceived" events, which, according to the criteria of the standard, capture the event, and then a bubbling event occurs. The order of all events is: Other elements capture phase events--This element code order
Although proficient in jquery, I am not very familiar with its prototype javascript. Recently I have encountered some difficulties in learning javascript, such as bubbling and capturing, which have been mentioned many times, but I do not know where the application is. I have found some good articles to explain and share them with you here.
Quirksmode has a series of articles that are both good and easy to u
follows.As you can see, the click event is intercepted by the parent element first, and the function only takes effect in the event capture phase.In the bubble stage of the target and eventWhen an event arrives at a specific element, it occurs on a specific element and is considered part of the bubble stage. Then, the event starts to bubble when the bubble stage occurs.Prevent event bubblesThe event Bubbling Process can be blocked. Prevent unnecessar
-Event bubbling and capturing-Event Monitoring--Block event propagationOne, event bubbling and capturing1, concept : When the child element and the parent element defined the same event, such as the onclick event is defined, click the child element, the parent element's OnClick event will also be triggered. JS says the mechanism for this event to occur continuous
complain. The order you complain about this time is you > Mom > Dad. So you go back and see if the order is the same as the event bubble?You don't know that, I'm going to have to code."Utf-8"> "stylesheet"Type="Text/css"href="">"Click"> "Click2" class="son">1. What happens if I click Id=click2, which is the second one? He will trigger the Click2 event first, then go up, then trigger the Click event.2. When clicking on the Id=click element, it only triggers its own click event, as he bubbles up
1 Event propagation--bubbling and capturingBy default, events use the bubbling event stream and do not use the capture event stream. However, in Firefox and Safari, you can explicitly specify the use of the capture event stream by passing in the Usecapture parameter when registering an event and setting this parameter to True.2 Bubbling Event streamWhen an event
Bubbling: The event is first triggered on the target element, then the event bubbles from inside to outside its root element, which is then triggered by its parent element (such as the A-element binding click event, click A, the click event is triggered from the a element up to the document element in turn)Capture: The event that is triggered is first captured by the root element of the target element and then captured by its child elements, in turn,
(i) Event-handling model---event bubbling, capturing(1) Event bubbling - - - - - in - to + - theAs follows: Click on the Blue area, three div will be corresponding Click event(2) Event capture1Warpper.addeventlistener (' click ',function(){2Console.log ("warpper-red");3},true)4Content.addeventlistener (' click ',function(){5Console.log (' Content-yellow ');6},t
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.