事件委托
事件委托指的是,不在事件的发生地(直接dom)上设置监听函数,而是在其父元素上设置监听函数,通过事件冒泡,父元素可以监听到子元素上事件的触发,通过判断事件发生元素DOM的类型,来做出不同的响应。
举例:最经典的就是ul和li标签的事件监听,比如我们在添加事件时候,采用事件委托机制,不会在li标签上直接添加,而是在ul父元素上添加。
好处:比较合适动态元素的绑定,新添加的子元素也会有监听函数,也可以有事件触发机制。
事件流
事件捕获
点击一个目标元素,响应的顺序是从window到document到html....最后到目标元素,这个阶段叫捕获阶段。
简单说就是点击一个目标元素,windows会派一个人去看下这个目标元素在哪,从window到document到html....最后到目标元素。
事件捕获过程:
var ev = document.getElementById('ev')
window.addEventListener('click', function() {
console.log('windown')
}, true) //true是捕获,false是冒泡
document.addEventListener('click', function() {
console.log('document')
}, true)
document.documentElement.addEventListener('click', function() {
console.log('html')
}, true)
document.body.addEventListener('click', function() {
console.log('body')
}, true)
ev.addEventListener('click', function () {
console.log('ev')
},true)
事件冒泡
当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到window ,这个阶段叫冒泡阶段。
冒泡过程把上面true改成false
var ev = document.getElementById('ev')
window.addEventListener('click', function () {
console.log('windown')
}, false) //true是捕获,false是冒泡
document.addEventListener('click', function () {
console.log('document')
}, false)
document.documentElement.addEventListener('click', function () {
console.log('html')
}, false)
document.body.addEventListener('click', function () {
console.log('body')
}, false)
ev.addEventListener('click', function () {
console.log('ev')
}, false)
阻止事件冒泡
若一个按钮在另一个按钮之上,点击这个会触发两个按钮的事件,使用阻止事件冒泡,只触发第一个点击事件
function preventBubble(event){
var e=arguments.callee.caller.arguments[0]||event; //若省略此句,下面的e改为event,IE运行可以,但是其他浏览器就不兼容
if (e && e.stopPropagation) {
e.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
}
案例:
没有阻止冒泡: