Js入门事件相关概念

内容部分摘录的网络博文

事件流(DOM2)

IE9+

阶段一(事件捕获)

事件从 document 向下传播到目标元素，依次检查所有节点是否绑定了监听事件，如果有则执行。

阶段二(处于目标阶段)

事件在达到目标元素时，触发监听事件。

阶段三(事件冒泡)

事件从目标元素冒泡到 document，并且一次检查各个节点是否绑定了监听函数，如果有则执行。

事件绑定

1. dom直接绑定事件

DOM0事件模型

特点: 高耦合

<div id="child" onclick="console.log('hello');"></div>

2. Js中获取dom元素后为指定事件类型如(onclick)绑定事件

DOM0事件模型

特点: 易发生事件覆盖

var ele = document.getElementById("child");
ele.onclick = function() {
    console.log('hello');
}

3. Js中获取dom后通过addEventListener绑定事件

DOM2事件模型

特点: 多次绑定,默认事件冒泡并可改为事件捕获,使用后需主动移出

var ele = document.getElementById("child");
// removeEventListener 移出监听事件
ele.addEventListener('click', function() {
    console.log('hello');
}, false);

事件委派(事件冒泡的应用)

通过事件委派来减少dom和js的连接树也可提升网页性能

场景: 多个子元素(动态)拥有相同的事件处理,为减少子元素事件绑定的繁琐过程,可以将事件绑定到公共的父元素上,当触发到子元素时,利用事件冒泡的机制由父元素来统一响应并判断具体的子元素来做处理。

小提示:

1. 阻止事件冒泡: event.stopPropagation()
2. 阻止默认事件: event.preventDefault()
3. 捕获阶段无阻止事件的函数,故一般设置为冒泡事件