事件委托、事件捕获和冒泡、阻止事件冒泡

事件委托

事件委托指的是,不在事件的发生地(直接dom)上设置监听函数,而是在其父元素上设置监听函数,通过事件冒泡,父元素可以监听到子元素上事件的触发,通过判断事件发生元素DOM的类型,来做出不同的响应。
举例:最经典的就是ul和li标签的事件监听,比如我们在添加事件时候,采用事件委托机制,不会在li标签上直接添加,而是在ul父元素上添加。
好处:比较合适动态元素的绑定,新添加的子元素也会有监听函数,也可以有事件触发机制。

事件流

事件流

DOM事件流

事件捕获

点击一个目标元素,响应的顺序是从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;
            }
        }


案例:

没有阻止冒泡:


    
会触发两次点击事件

添加阻止冒泡函数:


    
只执行button的点击事件,阻止了父级div的点击事件

你可能感兴趣的:(事件委托、事件捕获和冒泡、阻止事件冒泡)