DOM事件
dom对象允许用户对一系列操作进行反应,js可以在事件发生时执行,用户常见的事件有
- 单击鼠标
- 双击鼠标
- 右击鼠标
- 鼠标按下,松开
- 网页加载完成
- 键盘按下
- 输入字段改变
捕获与冒泡
dom的数据结构为树,所以在用户操作元素时,也相当于操作了它的父亲节点和祖先节点。那么假如这些节点都挂上了事件的监听函数。当事件发生时,程序的执行顺序应该是什么样的呢?
w3c对这个流程进行了规范,就是捕获和冒泡。捕获就是函数执行的顺序是从祖先节点向下依次执行到当前节点。冒泡则相反。如果这样一个流程,在这个分支上的函数就要在捕获、冒泡阶段各执行一次。所以这边可以设置事件监听的函数是要在哪个阶段执行,代码如下:
element.addEventListener("click",fn,true) //捕获阶段执行
element.addEventListener("click",fn) //默认冒泡阶段执行
事件委托
如果我们想要对当前不存在的元素进行事件的监听,可以运用事件委托的方法。事件委托是通过冒泡实现的,我们把事件监听函数挂在父亲节点上上。这样,一个新元素要促发事件也会经过父亲节点。
另一个应用就是可以很多监听实现相同功能的节点。如果每一个节点都要进行监听,有些浪费内存。所以可以利用事件委托的方法,监听这些元素的祖先节点。这样,等到冒泡时候,我们判断下当前目标target是不是我们要监听元素中的一个就好。
阻止默认动作
使用preventDefault()方法,这个方法的作用是使浏览器在渲染时,默认动作不照常执行,但是事件继续传播。
取消冒泡
e.stopPropagation() //阻止捕获和冒泡阶段中当前事件的进一步传播