js事件冒泡及其阻止方法

js事件冒泡

概念：事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深
的那个节点）接收，然后逐级向上传播。也就是说我点击子元素，如果父级元素也有监听点击事件，也会被触发到。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡</title>
    <style type="text/css">
        .par {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
        .child {
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color:rgb(223, 240, 77);
            display: inline-block;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="par">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
    </div>
</body>
    <script type="text/javascript">
        let parent = document.getElementsByClassName('par')[0],
            childOne = document.getElementsByClassName('child')[0]
        parent.addEventListener('click', function(){console.log('I am parent')},false);
        childOne.addEventListener('click', function(){console.log('I am childOne')},false)
</script>
</html>

上述例子，当你点击了第一圆圈，就会输出
I am childOne
I am parent
原因就是父元素的事件也被触发到了，这是就会很不方便，可能我们写在父元素的事件并不想被触发。
这里我们可以用到事件对象（在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。）
事件对象的stopPropagation() 方法，该方法可以取消事件的进一步冒泡。

 childOne.addEventListener('click', function(event){event.stopPropagation();  console.log('I am childOne')},false)

当现在我们三个圆圈都要执行一个逻辑相同的函数，输出圆圈代表的数字时
event.target：表示触发一系列事件的源头
event.target.getAttribute(‘data-id’)：获取触发事件的源头的data-id属性。

<body>
    <div class="par">
        <div class="child"  data-id="1"></div>
        <div class="child" data-id="2"></div>
        <div class="child" data-id="3"></div>
    </div>
</body>
    <script type="text/javascript">
        let parent = document.getElementsByClassName('par')[0],
            childOne = document.getElementsByClassName('child')[0]
            childTwo = document.getElementsByClassName('child')[1]
            childThree = document.getElementsByClassName('child')[2]
        function myFun(event){
        		event.stopPropagation();  console.log(event.target.getAttribute('data-id'))
        }
        childOne.addEventListener('click', myFun,false)
        childTwo.addEventListener('click', myFun,false)
        childThree.addEventListener('click', myFun,false)
</script>

上述代码是比较多余的写法，是分别监听了三个元素
这里我们也可以用一种事件委托的写法，把事件监听写在他们的父元素里

let parent = document.getElementsByClassName('par')[0];
function myFun(event){
	 console.log(event.target.getAttribute('data-id'))
}
parent .addEventListener('click', myFun,false)

dream-wk

发布了5 篇原创文章 · 获赞 4 · 访问量 885

私信关注

js事件冒泡及其阻止方法

js事件冒泡

猜你喜欢