事件传播、捕获、委托和阻止默认事件

87 阅读1分钟

事件传播

在触发子元素的事件时,会将“行为”也传递给父元素,并触发父级的同类型事件 在传递行为时,会将此行为一直上传,如果父级有同类型事件,则会触发,如果没有,则一直向上传递

冒泡

window默认的传播方式为冒泡 冒泡:事件传播时,从目标开始传播,一直到父级,body...window;

捕获

addEventListner的第三个参数是布尔值,默认值为false,即冒泡,但当设置为true时,则改变传播方式为捕获 捕获:从最顶层开始,逐层向下传递; ==补充:== 即设置为true的先显示,都有则看父级;

委托

事件委托:因为事件冒泡的存在,当点击子元素时,其行为一定会传递给父元素,所以可将子元素统一的事件统一提交给父级; e.target:触发事件的事件源,里面包含很多数据; if (e.target.nodeName === 'LI') console.log('点击了 li') ==补充:==

event.target.nodeName     //获取触发事件元素标签名(注意获取到的是标签名的大写)

event.target.id       //获取触发事件元素的id

event.target.className    //获取触发事件元素class类名

event.target.innerHTML    //获取触发事件元素的内容

阻止默认事件

可以通过ele(事件源).preventDefault()阻止默认事件的发生;