JS事件流机制
1.事件冒泡的概念:事件按照从最特定事件目标到最不特定事件目标的顺序触发。通俗来讲就是,就是当设定了多个div嵌套的时;即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作,但是父div的onclick事件同样会被触发。阻止事件冒泡的操作有,给事件冒泡的原对象绑定事件为e.cancelBubble=true,阻止事件继续传播用的函数是e.stopPropagation,e.preventDefault取消该事件而不停止事件的进一步传播。
2.事件捕获的概念:从顶层目标元素或者从目标元素到顶层元素,和事件冒泡是一个相反的过程。事件从最不精确的对象开始触发,然后到最精确。
2.事件捕获的概念:从顶层目标元素或者从目标元素到顶层元素,和事件冒泡是一个相反的过程。事件从最不精确的对象开始触发,然后到最精确。
3.一般来说事件冒泡机制用的更多一些,所以在IE8以及之前,IE只支持事件冒泡。IE9+开始两种模型都支持,可以通过addEventListener的userCapture来设定,useCapture=false代表着事件冒泡。useCapture=true代表着事件捕获。
4.DOM事件流指的是把事件分为三个阶段:捕获阶段、目标阶段、冒泡阶段。先调用捕获阶段的处理函数,其次调用目标阶段的处理函数,最后调用冒泡阶段的处理函数。捕获阶段的事件处理函数,一定比冒泡阶段的事件处理函数先执行。但是最内层元素不区分先捕获还是先冒泡,谁先谁执行。
5.像这种把onclick写在标签内的都是DOM0级事件,fn和fn1依次执行。DOM0级事件会存在事件覆盖,同时也会覆盖行内的元素。DOM2级事件会依次执行绑定的方法,不会进行一个覆盖。DOM0级事件只支持冒泡而不支持捕获,但DOM2级事件既支持捕获也支持冒泡。
6.什么是事件委托:基于js的事件冒泡机制,可以以JS事件委托的方式,在父元素上给父元素的子元素绑定事件,同时减少事件绑定的时间复杂度。
事件委托的优点:1:提高性能,每个函数都会占用内存空间,只需要添加一个事件处理程序代理所有事件,所占用的内存空间更少。
2.动态监听:使用事件委托可以自动绑定动态增加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。
https://blog.csdn.net/runner_123/article/details/80350259
5.像这种把onclick写在标签内的都是DOM0级事件,fn和fn1依次执行。DOM0级事件会存在事件覆盖,同时也会覆盖行内的元素。DOM2级事件会依次执行绑定的方法,不会进行一个覆盖。DOM0级事件只支持冒泡而不支持捕获,但DOM2级事件既支持捕获也支持冒泡。
6.什么是事件委托:基于js的事件冒泡机制,可以以JS事件委托的方式,在父元素上给父元素的子元素绑定事件,同时减少事件绑定的时间复杂度。
事件委托的优点:1:提高性能,每个函数都会占用内存空间,只需要添加一个事件处理程序代理所有事件,所占用的内存空间更少。
2.动态监听:使用事件委托可以自动绑定动态增加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。
https://blog.csdn.net/runner_123/article/details/80350259