冒泡和捕捉

82 阅读1分钟

点击子元素 把父元素的事件也调用了 事件冒泡

        let div2 = document.querySelector('.div2')
        div1.onclick = function(){
            alert(1)
        }
        div2.onclick = function(e){
            /* 兼容写法 让谷歌和ie都支持 */
            let eObj = e || event;
            // eObj.stopPropagation()
            eObj.cancelBubble = true;

event是一个js的关键字 这个关键字变量保存了事件源对象的属性*/ console.log(event); event.stopPropagation() event.cancelBubble = true;

事件源对象 console.log(e);

阻止事件冒泡的方法 e.stopPropagation();

取消冒泡属性 e.cancelBubble = true; alert(2) }

false表示冒泡(从里到外触发事件)

       div1.addEventListener('click',function (){
           alert(1)
       },true)
       div2.addEventListener('click',function (){
           alert(2)
       },true)