事件冒泡和事件捕获这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。

1、事件冒泡

事件冒泡:事件会从最内层的元素开始发生,一直向上传播,直到document对象。

2、事件捕获

事件捕获:与事件冒泡相反,事件会从最外层开始发生,直到最具体的元素。

3、addEventListener方法

element.addEventListener(event, function, useCapture)

第一个参数是需要绑定的事件,第二个参数是触发事件后要执行的函数。而第三个参数默认值是false,表示在事件冒泡的阶段调用事件处理函数,如果参数为true,则表示在事件捕获阶段调用处理函数。

4、事件代理机制

table.addEventListener("click", function(el) {
       //如果触发事件本身的类名==del,那么进行删除操作
       if(el.target.className == "del") {          
       el.target.parentNode.parentNode.remove();
       }
})

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐