js事件捕获与冒泡-CSDN博客

博客介绍了事件捕获与冒泡，冒泡是由内向外传递，还提及阻止冒泡（捕获）的方法，如w3c标准用event.stopPropagation，IE用event.cancelBunnle=true。此外，介绍了事件委托、阻止默认行为等内容，如鼠标右击事件的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件捕获与冒泡

一.冒泡：是由最里面的的元素向外面进行传递，默认（捕获则相反）

阻止冒泡（捕获）

w3c标准：event.stopPropagation

IE:event.cancelBunnle=true

二.（行为：）事件委托

var d1 = document.getElementById("d1");
        var d2 = document.getElementById("d2");
        var d3 = document.getElementById("d3");
        d1.onclick = function(){
             alert("中国")
         }
         d2.onclick = function(){
             alert("湖北")
         }
         d3.onclick = function(){
             alert("武汉")
         }
绑定事件二级写法：时间监听器
dom.addEventListener(事件名称。处理函数callback  [,boolean])
ccallback叫回调函数；当函数的参数为一个函数的时候，我们管这种参数叫回调函数
[]表示的是可选参数，任何的手册都是一样
false为冒泡阶段  默认的值
true为捕获阶段
d1.addEventListener('click',function(event){
            var event = event || window.event;//兼容性
            alert("中国")
            event.stopPropagation();    //阻止捕获
        },false);
        d2.addEventListener('click',function(){
            alert("湖北")
        },false);
        d3.addEventListener('click',function(event){
            var event = event || window.event;
            alert("武汉")
            event.stopPropagation();     //阻止冒泡
        },false);

二.行为（当你点击后带来的）

<a href="http://www.baidu.com">百度</a>

当你点击后所带来的的后果

点击a链接，后果是跳转

阻止默认行为：

var a = document.getElementsByTagName("a")[0];
        a.onclick = function(event){
            // return false;  

            var event = event || window.event;
            event.preventDefault()

            // 1.return false;
            // 2 W3C标准.event.preventDefault()    //IE9以下不兼容
            // 3 老版本IE event.returnValue = false 
        }

鼠标右击事件：

document.oncontextmenu = function(){   //右击事件有带来后果
            console.log('按了鼠标的右键')
            return false
        }

三.事件对象

var div01 = document.getElementById("div01");
        var div02 = document.getElementById("div02");
        div01.onclick = function(event){
            // event是事件对象，有事件触发的时候就会产生的对象
            // 兼容性
            var event = event || window.event;
            var target = event.target || event.srcElement;    //可以拿到点击的子元素
            console.log(event);
            console.log(target);
        }

四。事件委托

var ul = document.getElementsByTagName("ul")[0];
        ul.onclick = function(e){
            e = e || window.event；//兼容性
            var target = event.target || event.srcElement;
            console.log(target.innerHTML);
        }

转载于:https://www.cnblogs.com/lyx1014/p/11079627.html