1. What is the event model of DOM?
The event model of DOM:
- Script model
- Inline model (one of the same kind, the latter covers)
- Dynamic binding (multiple of the same kind)
<body>
<!--⾏内绑定：脚本模型-->
<button onclick="javascrpt:alert('Hello')">Hello1</button>
<!--内联模型-->
<button onclick="showHello()">Hello2</button>
<!--动态绑定-->
<button id="btn3">Hello3</button>
</body>
<script>
/*DOM0：同⼀个元素，同类事件只能添加⼀个，如果添加多个， * 后⾯添加的会覆盖之前添加的*/
function shoeHello() {
alert("Hello"); }
var btn3 = document.getElementById("btn3");
btn3.onclick = function () {
alert("Hello"); }
/*DOM2:可以给同⼀个元素添加多个同类事件*/
btn3.addEventListener("click",function () {
alert("hello1"); });
btn3.addEventListener("click",function () {
alert("hello2"); })
if (btn3.attachEvent){
/*IE*/
btn3.attachEvent("onclick",function () {
alert("IE Hello1"); })
}else {
/*W3C*/
btn3.addEventListener("click",function () {
alert("W3C Hello"); })
}
</script>
2. What is the event flow of DOM?
Events are specific interaction moments that change in the document or browser window, and the event flow (also called event propagation) describes the order in which events are received from the page.
1. Event bubbling
Event bubbling, that is, the event is received by the most specific element (the node with the deepest nesting level in the document) at the beginning of the event, and then propagated up to the less specific nodes.
example:
<!DOCTYPE HTML> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<body>
<div></div>
</body>
</html>
If the <div> element in the page is clicked, then the click event will propagate upwards along the DOM tree and will happen on every node, in the following order:
- div
- body
- html
- document
2. Event capture
The idea of event capture is that the less specific nodes should receive the event earlier, and the most specific node should receive the event last. The purpose of event capture is to capture the event before it reaches the predetermined target.
Take the html structure in the previous section as an example: During the event capture process, the document object first receives the click event, and then the event descends along the DOM tree in turn, and propagates directly to the actual target of the event, which is the <div> element.
- document
- html
- body
- div
3. Event flow
The event flow is called event propagation. The event flow specified by DOM2 events includes three phases: the capture phase, the target phase, and the bubbling phase.
The trigger sequence is usually
- Carrying out incident capture provides an opportunity to intercept incidents.
- The actual target receives the event.
- In the bubbling phase, you can respond to events at this stage.
3. What is event delegation?
Event delegation is to use event bubbling to manage all events of a certain type by specifying only one event handler.
<ul id="parent">
<li class="child">one</li>
<li class="child">two</li>
<li class="child">three</li>
...
</ul>
<script type="text/javascript">
//⽗元素
var dom= document.getElementById('parent');
//⽗元素绑定事件，代理⼦元素的点击事件
dom.onclick= function(event) {
var event= event || window.event;
var curTarget= event.target || event.srcElement;
if (curTarget.tagName.toLowerCase() == 'li') {
//事件处理 }
}
</script>
Event delegation is often selected when binding a large number of events.
advantage:
- Save memory usage and reduce event registration.
- There is no need to bind events to it again when adding child objects, which is suitable for adding elements dynamically.
limitation:
- Events such as focus and blur have no event bubbling mechanism, so they cannot be delegated.
- For events such as mousemove and mouseout, although there are events bubbling, they can only be calculated and positioned continuously by location, which consumes high performance and is not suitable for event delegation.