事件流中的事件冒泡

最新推荐文章于 2022-12-12 16:53:08 发布

jiaojsun

最新推荐文章于 2022-12-12 16:53:08 发布

阅读量250

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/jiaojsun/article/details/77622850

版权

javascript 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

1. 事件冒泡的概念

事件函数绑定：给**加事件，给元素加事件处理函数。举个栗子。

//oDiv1.onclick = fn1; 事件函数绑定。告诉div1，如果他接收到了一个点击事件，那么他就去执行fn1

    //我在马路边捡到一分钱，把他交个警察叔叔
    我.on马路边捡到一分钱 = function() {
        把他交个警察叔叔
    }

事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制。
可以通过下面这个例子了解一下。假如oDiv2.onclick = fn1;不注销的话，我们点击oDiv3，会依次弹出div3，div2,div1。当我们注销这行代码的话，会依次弹出div3,div1。此处虽然oDiv2没有触发事件，但是它向上传播到div3。

<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</body>

<script>
window.onload = function() {

    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var oDiv3 = document.getElementById('div3') 
    function fn1() {
        alert( this.id );
    }   
    oDiv1.onclick = fn1;
    //oDiv2.onclick = fn1;
    //此处虽然将oDiv2注销，但是依然可以弹出oDiv3
    oDiv3.onclick = fn1;    
}
</script>

2. 关于阻止事件冒泡

阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;
可以看下面这个例子，我们想点击按钮，然后让div显示出来

<body>
    <input type="button" value="按钮" id="btn" />
    <div id="div1"></div>
</body>

如下所示，点击按钮，没有任何反应。因为oBtn会把这个事件传播到它的父级，一直到document，所以会触发document.onclick，导致执行了oDiv.style.display = ‘none’;所以div显示不出来

<script>
window.onload = function() {
    var oBtn = document.getElementById('btn');
    var oDiv = document.getElementById('div1');

    oBtn.onclick = function(ev) {
        oDiv.style.display = 'block';
    }
    document.onclick = function() {
        oDiv.style.display = 'none';
    }   
}
</script>

针对上面的问题可以将

document.onclick = function() {
        oDiv.style.display = 'none';
    }

变成下面这种写法，这样就可以过上1s中显示出来

document.onclick = function() {
        setTimeout(function() {
            oDiv.style.display = 'none';
        }, 1000);   
        oDiv.style.display = 'none';
    }

关于这个问题可以通过阻止事件冒泡实现

<script>
window.onload = function() {

    var oBtn = document.getElementById('btn');
    var oDiv = document.getElementById('div1');

    oBtn.onclick = function(ev) {
        var ev = ev || event;

        ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡

        oDiv.style.display = 'block';
    }

    /*oBtn.onmouseover = function(ev) {
        冒泡只能单独的去阻止，想要阻止onmouseover 事件就要单独的写
        var ev = ev || event;       
        ev.cancelBubble = true;
    }*/

    document.onclick = function() {
        oDiv.style.display = 'none';
    }

}
</script>

3. 事件冒泡的好处

由于事件冒泡的机制，所以我们可以把绑定在子级的事件直接绑定在父级上，如下所示。我们希望点击黑色div，红色div会出现，离开红色和黑色的地方，红色div消失。
这个时候可以用事件冒泡，我们把鼠标移到黑色div上面，它不执行这个事件，但是会把这个事件传播到它的父级红色div上，从而触发红色div的移入事件，同理，从红色移开也会触发移开事件，从红色移开则直接触发红色的移开事件
这里写图片描述

<style>
#div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}
#div2 {width: 30px; height: 60px; position: absolute; right: -30px; top: 70px; background: black; color: white; text-align: center;}
</style>
<body>
    <div id="div1">
        <div id="div2">分享到</div>
    </div>
</body>

<script>
window.onload = function() {

    var oDiv = document.getElementById('div1');

    oDiv.onmouseover = function() {
        this.style.left = '0px';
    }

    oDiv.onmouseout = function() {
        this.style.left = '-100px';
    }

}
</script>

jiaojsun

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件流中的事件冒泡

1. 事件冒泡的概念事件函数绑定：给**加事件，给元素加事件处理函数。举个栗子。//oDiv1.onclick = fn1; 事件函数绑定。告诉div1，如果他接收到了一个点击事件，那么他就去执行fn1 //我在马路边捡到一分钱，把他交个警察叔叔我.on马路边捡到一分钱 = function() { 把他交个警察叔叔 }事件冒泡 : 当一个元素接收到事件的时
复制链接

扫一扫

专栏目录