Event handling model - event bubbling, capture
Whether bubbling or capture are talking about the sequence of events.
Event bubbling:
- Structural (non-visual) elements nested relationship, there will be an event bubbling function, in which the same events from child elements bubbling to the parent element. (Sub-element executed first, and then execute the parent element)
Event Capture:
- Structural (non-visual) elements nested relationship, there will be an event capture function, that same event, captured from the parent element to the child element. (Function of the first implementation of the parent element, then perform sub-elements)
IE does not capture events
triggered sequence: first capture, after bubbling
focus, blur, change, submit, reset, select other events do not bubble.
Sometimes we do not need the event bubble or is it affecting us, we can cancel it.
Cancel bubbling and prevent the default event
Cancellation bubble:
- W3C standards event.stopPropagation (); it does not support the following versions ie9
- IE unique event.cancelBubble = true;
- Bubble package cancel function stopBubble (event)
<body>
<div style = "width:100px;height:100px;background-color:red;"></div>
<script type="text/javascript">
function stopBubble(event) {
if(event.stopPropagation) {
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
</script>
</body>Prevent the default event:
- The default event - the form is submitted, a tag jump, right-click menu, etc.
- 1.return false; object properties registered in the manner of events to take effect
- 2.event.preventDefault (); W3C mark, the following is not compatible with IE9
- 3.event.returnValue = false; compatible IE
- Packaging prevent the default event function cancelHandler (event);
<body>
<div style = "width:100px;height:100px;background-color:red;"></div>
<script type="text/javascript">
function cancelHandle(event) {
if(event.preventDefault) {
event.preventDefault();
}else{
event.retrunValue = false;
}
}
</script>
</body>Event Object
event || window.event IE for
the event source object (refer to the current function is triggered, for example, the current click function):
- Firefox only this event.target
- event.srcElement IE only this
- It has two chrome
compatibility wording:
<body>
<div style = "width:100px;height:100px;background-color:red;"></div>
<script type="text/javascript">
wrapper.onclick = function(e) {
var event = e || window.event; //事件对象
var target = event.target || event.srcElement; //事件源对象
</script>
</body>Event delegates
Event delegates is like a way to help us streamline efficiency, for the majority, "when we all need to bind the child element, a binding efficiency is too low and not conducive to a flexible and change later, so we use event bubbling the property, to establish a method for the event delegate. "
Use event bubbling, and event source object processing
Advantages:
1. Good performance: do not need to loop through all the elements of a more binding events
2. Flexible: When a new child elements do not need to re-bind the event
Example:
design a program, click on the li can print the appropriate number.
<body>
<ul>
<li>1<li>
<li>2<li>
<li>3<li>
<li>4<li>
<li>5<li>
<li>6<li>
<li>7<li>
<li>8<li>
</ul>
<script type="text/javascript">
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function(e) {
var event = e || window.event; //事件对象
var target = event.target || event.srcElement; //事件源对象
cosnole.log(target.innerText); //（target：事件源对象）每次执行时，都打印的是它的事件源对象（表示当前所点击的对象）
｝
</script>
</body>We did not add any event to li, but when we click li (event source object), it will trigger event bubbling, so that the event ul be executed, so do not have to add a li a event, event bubbling method, He looked very smart and efficient, this is the event delegate.