DOM level events and DOM
DOM Level total can be divided into four levels: DOM0 level, DOM1 level, DOM2 and DOM3 grade level, and DOM events are divided into three levels: DOM0 level event handler, DOM2-level event handling and event handling DOM3 level. As shown below:
Why did not DOM1 level event to handle it?
Because level 1 DOM standard does not define event-related content, so there is no so-called Level 1 DOM event model.
1.DOM0 level events
Before looking at DOM0 level events, we need to first understand HTML event handlers, it is the first of this kind of event handling code is as follows:
<button type="button" onclick="showFn()"></button>
<script>
function showFn() {
alert('Hello World');
}
</script>
The above code we passed a onclick attribute directly in HTML code defines a trigger showFn method, the biggest drawback of such an event handler that is strongly coupled to HTML JS, once we need to modify the name of the function you have to modify two places. Of course, the advantage is not required to complete the binding operation DOM events.
So what is DOM0 level processing incident? DOM0 level event is to assign a function to an event handler attributes, such as:
<button id="btn" type="button"></button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('Hello World');
}
// btn.onclick = null; 解绑事件 释放占用内存；
</script>
We give button above code defines a id, id get to this button by JS, and a function assigned to an event handler attribute onclick, such an approach is reflected DOM0 level processing events. We can unbundling events by assigning null to the event handler property.
DOM0 level event handler drawback is that the same handler can not simultaneously bind multiple processing functions, such as I would like on a button click event plus another function. such as:
<button id="btn" type="button"></button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('Hello World');
} // 被覆盖，并不执行
btn.onclick = function() {
alert('Hello JavaScript');
}
// btn.onclick = null; 解绑事件 释放占用内存；
</script>
2.DOM2 level events
DOM2-level event on the basis of DOM0 level events make up for a handler can not bind a number of disadvantages processing functions while allowing a handler to add multiple handlers. code show as below:
<button id="btn" type="button"></button>
<script>
var btn = document.getElementById('btn');
function showFn() {
alert('Hello World');
}
btn.addEventListener('click', showFn, false);
// btn.removeEventListener('click', showFn, false); 解绑事件
</script>
DOM2-level events defines two methods addEventListener and removeEventListener, were used to bind reconciliation tie event, the method includes three parameters, namely the binding event handling property name (not included on), and whether the handler capture the event handler function. If we need to add a method into a mouse, just:
btn.addEventListener('mouseover', showFn, false);
Will trigger showFn this method when clicking the button and move the mouse.
Note that IE8 below the rank version does not support addEventListener and removeEventListener, and detachEvent attachEvent need to achieve:
btn.attachEvent('onclick', showFn); // 绑定事件
btn.detachEvent('onclick', showFn); // 解绑事件
Here we do not need to pass the third argument, because IE8 version only supports below the rank of a bubbling-type events.
3.DOM3 level events
DOM3 level event on the basis of DOM2-level event on adding more types of events, all types are as follows:
UI events, when elements of the interaction on the user and page triggers, such as: load, scroll
focus event fires when an element gains or loses focus, such as: blur, focus
mouse events when the user through the mouse triggered when a page to perform operations such as : dbclick, mouseup
wheel events, when using the mouse wheel or similar device is triggered, such as: mousewheel
text event, when entering text in the document triggers, such as: textInput
keyboard events triggered when the user performs an operation on a page through the keyboard, such as: keydown, keypress
synthetic event, is when the IME (input method editor) trigger input characters, such as: compositionstart
change event fires when the underlying DOM structure changes, such as: DOMsubtreeModified
Meanwhile DOM3 level event also allows the user to customize some of the events.
DOM event flow
In the above mentioned third parameter of addEventListener whether to perform the specified event in the capture phase, set to true to execute the event in the capture phase, and is set to false to perform at the event bubbling phase. So what is the event bubbling and event capture it? FIG explained by the following:
1. event bubbling
The so-called event bubbling event is the same as the bubbles generated from the best place to start to take up layer by layer, such as a label for the event target figure above, click on a label at the same time will trigger p, click on the event on the li, up layer by layer until the outermost or html document. The following sample code is:
<div id="box">
<a id="child">事件冒泡</a>
</div>
<script>
var box = document.getElementById('box'),
child = document.getElementById('child');
child.addEventListener('click', function() {
alert('我是目标事件');
}, false);
box.addEventListener('click', function() {
alert('事件冒泡至DIV');
}, false);
</script>
After running the above code we click on a tab will pop up first, 'I am the target event' prompt, and then will pop up 'event bubbling to DIV' tips, which would explain the event to bubble up from the inside out.
So how do we stop the event bubbling it? Event object here stopPropagation method involves events, as follows:
child.addEventListener('click', function(e) {
alert('我是目标事件');
e.stopPropagation();
}, false);
After stopPropagation plus method, we click again on a label will not trigger a click event on a div.
2. Event Capture
And event bubbling contrast, event capture is executed from top to bottom, we just need to addEventListener third parameter to true on the line.
<div id="box">
<a id="child">事件冒泡</a>
</div>
<script>
var box = document.getElementById('box'),
child = document.getElementById('child');
child.addEventListener('click', function() {
alert('我是目标事件');
}, true);
box.addEventListener('click', function() {
alert('事件冒泡至DIV');
}, true);
</script>
At this time we click on a label, the first pop-up is 'event bubbling to DIV', followed by the pop-up is 'I am the target event', and event bubbling just the opposite.
