Going to pop a package assembly, do when forget the considerations event bubbling, the result is not the pit was not. In order to solve their own problems, go to access a lot of information, knowledge related to the flow of events gave the summary.
Event Bubbling: A simple, but the pit of my knowledge countless back!
JavaScript and HTML interactive accomplished by events. The event stream browser is a very important concept. Do not discuss those ancient browsers event capture and event bubbling controversy, only need to know the events specified in the DOM2 stream includes three parts, event capture stage, in the target phase, the event bubbling phase.
First, event capture
Event capture, document elements from the start, the sooner the more senior of the parent element receives an event, so this is a process from the top down.
Again, not stepped pit in practical applications, you may not really grasp the knowledge points. So, what is a common event capture pit it?
1. a pit: the newly inserted sub-elements does not bind the click event
Many students may come across such a pit at the time of js beginner. A ul element in the initial state has four li elements, we can cycle to the li element is added click event, we want to perform the action. This example is that of the pit, li newly added element that we will not have a click event bound.
<ul class="container">
<!-- 先循环给原有的4个li绑定click事件 -->
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<!-- 这是新添加的li元素，但是该元素没绑定click事件 -->
<li class="item new"></li>
</ul>Yes, that is such a pit, in order to solve this problem, we will use the principle of event capture.
$('ul.container').click(function(event) {
var target = event.target;
if (target.className == 'item') {
// dosomething
}
})In the above solution, I do not li tied directly to the event, but to all the parent ul li binding event. According to the principle event capture, the event will be a top-down pass to li, we just need to make sure that we can target element, className judgment of li in the above example by some simple conditional.
This way is the famous event delegate.
Event delegation is a very important point in practice and knowledge will be used often.
2. Pit 2: If the target element has child elements, then how do?
When we determine the target element in use className, encountered such a situation.
...
<li class="item">
<div class="title">xxx</title>
<p class="desc">xxxxxxs</p>
</li>
...When we try to use the event delegation want to add elements to all li, during use className judge found that actually target event.target element is a child element li.item, this time there is no way to accurately bind events li on, how should we do this time?
This case, we have to do, it is to stop the transfer event capture, then, how to prevent it?
I know of a way to use css, to all children of li can add the following css properties
li.item > * {
pointer-events: none;
}Logically, there should be js way, but a lot of investigation article is not mentioned, and therefore temporarily so be it, when it came to the supplement.
In jquery, the event has helped us to achieve the commission, and to help us get rid of these pits. We only need to follow certain syntax, but we do not have the conditions to carry out their own judgment, such as we have to give all the elements of li.item binding events, worded as follows
// on中的第二参数就是我们的目标元素的选择器
$('ul.container').on('click', 'li.item', function(event) {
// dosomething
})Second, the event bubbling
Having captured the event, then it is said that this event bubbling pit. The so-called event bubbling, the goal is to make the bottom of the first element in the DOM tree of an event is received, then passed up, this is a bottom-up process.
We often experience one pop style, pop out when the content in the middle, then there will be a layer of semi-transparent mask will be page content separately from the pop area. Some content will pop a button click event bindings, such as confirmation and cancellation. In the semi-transparent mask, you may also bind a click event, when clicked, will pop hidden. If my lack of experience, the mask layer is provided became pop button parent, it will bring trouble event bubbling.
In other words, in the following example container is full screen masks, button a pop inside the click of a button. At the same time they are bound to click event, perform different actions. But in the actual execution, when I clicked on the button, then the button's click event and the container will be executed, bottom-up execution order
<div className="container">
<div className="button">click</div>
</div>I wrote a small example for this thing, we can begin to feel the pit. Click the blank will generate a pop
http://yangbo5207.github.io/s...
All right method to solve the problem is simply to prevent bubbling event.
$xxx.click(function(e) {
e.stopPropagation();
// ie
e.cancelBubble = true;
})Understand the entire flow of events, we can feel the transfer process and the direction of events in the DOM, and use him to solve our problems and all kinds of pits, although knowledge is a simple point, but it is very easy to be ignored, it is recommended you look for opportunities to grasp it firmly.
And there is a pit, and we may be rarely encountered in practice, this pit is, by nature do not support certain types of events event bubbling!
blur: when the element loses focus trigger, the event is not supported bubbling
focus: Fires when the element gets the focus, the event does not support the bubble
mouseenter: Fires when the mouse moves over an element, the event is not supported bubbling
mouseleave: when the mouse is moved when the element is triggered, the event does not support the bubble
... ...
And in IE6 IE7 IE8 change, select, submit, reset events are in fact no reference specification defines generate event bubbling.
When you are in need of bubbling, the binding of these events, and you just do not know there is still bubbling event by nature do not support, then you are probably on the tragedy. So at this point as long as there is an impression in the head inside like, I just remember that I have encountered such a pit, but temporarily can not remember the scenarios - -!
I know, met on the pit of the event flow so much, want to come should be considered a very complete summed up, worth about referrals and collections point oh!
