DOM事件机制与事件委托

DOM事件机制

两种事件机制

• 事件捕获：从外到内叫做事件捕获
• 事件冒泡：从内到外叫做事件冒泡

语法

target.addEventListener(type, listener, options);

注意：第三个参数用来表示我们是在捕获阶段来执行还是在冒泡阶段执行。默认值为false，表明是在冒泡阶段执行，而true表示在捕获阶段执行

targte与currentTarget

.target表示用户正在操作的元素，而.currentTarget表示程序员要监听的元素

阻止事件进行

语法

event.stopPropagation();

注意：它不会阻止默认事件，例如a链接跳转任然会被处理

event.preventDefault();//阻止默认事件

注意：默认事件有可以阻止，也有不可阻止，具体请查阅MDN英文文档

事件委托

如字面意思，事件委托就是将一个元素的事件绑定给另一个元素。通常做法是将事件委托给它的父级元素或者更外层元素。

实现原理

1. 给父元素绑定事件
2. 监听子元素的冒泡事件(一般情况下是冒泡)
3. 找到具体是哪个子元素的事件

优点

节省内存，优化页面整体性能，我们不必在每一个元素上都绑定事件。这样能减少dom操作，提升性能。