DOM事件

1. 解释以下概念:事件传播机制、阻止传播、取消默认事件、事件代理。

事件传播机制:

DOM2级事件规定的事件流包括三个阶段。
1丶事件捕获阶段:最不具体的节点最早接收到事件,最具体的节点最后接收到事件。
2丶处于目标阶段:事件在最具体的节点上发生,并在事件处理中被当成冒泡阶段的一部分。
3丶事件冒泡阶段:由最具体的元素接收并逐级向上传播至较不具体的节点。

阻止传播

stopPropagation() 取消事件进一步捕获或冒泡  具体代码见下面

取消默认事件

preventDefault() 取消事件默认行为 具体代码见下

事件代理

事件代理 (事件委托) 利用了事件冒泡原理,把事件函数绑定在父级元素上,再指定需要执行函数的子元素,在触发事件时,事件会依次冒泡到父级元素,从而触发绑定在父级元素的事件函数。也就是说只指定一个事件处理程序,就可以管理某一类型的所有事件。
作用:
1:减少与dom的交互次数,提高代码性能
2:动态生成DOM元素时,可通过事件代理给新增的元素添加事件函数

2. 写一个 Demo,演示事件传播的过程,演示阻止传播的效果。

DOM事件_第1张图片
事件传播.png

下面是阻止事件传播

DOM事件_第2张图片
阻止事件传播.gif

你可能感兴趣的:(DOM事件)