阻止事件冒泡:event.stopPropagation()
addEventListener('click',函数名,true/false)默认是false 事件冒泡;true事件捕获
事件委托/事件代理:
利用事件冒泡的特性,将本应该注册在子元素上的处理事件注册在父元素上,这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。
事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
这样做的优势有:
1.减少DOM操作,减少内存,提高性能。
2.随时可以添加子元素,添加的子元素会自动有相应的处理事件。
事件冒泡:
JS中当出发某些具有冒泡性质的事件是,首先在触发元素寻找是否有相应的注册事件,如果没有再继续向上级父元素寻找是否有相应的注册事件作出相应,这就是事件冒泡。
为什么要用事件委托:
一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的dom需要添加事件处理呢?比如我们有100个li,每个li都有相同的click点击事件,可能我们会用for循环的方法,来遍历所有的li,然后给它们添加事件,那这么做会存在什么影响呢?
在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间