js事件委托和事件冒泡

最新推荐文章于 2024-11-28 11:28:03 发布

dec_taipeiz

最新推荐文章于 2024-11-28 11:28:03 发布

阅读量342

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_44306615/article/details/127677281

js事件委托基本原理：

将子元素的事件委托给父元素来处理
就算父级下面暂时还没有子元素
待到子元素节点出来后一样可以触发事件

如果要删除ul下面的每个li，点击li即可删除
传统做法：
循环给每个li绑定事件，通过点击li删除自身
但是新增的li节点并不会绑定事件

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        let li = document.querySelectorAll('li')
        let ul = document.querySelector('ul')
        for(let i = 0;i<li.length;i++){
            li[i].onclick = function(){
                ul.removeChild(this)
            }
        }
    </script>
</body>

所以要用到事件委托来做
把li的事件绑定到ul身上：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        let ul = document.querySelector('ul')
        ul.onclick = function(e){
            ul.removeChild(e.target)
        }
    </script>
</body>

可以打印e.target
得到的是li元素的自身

js事件冒泡

点击子元素也会触发父元素的事件

<body>
    <div>
        <p>12312</p>
    </div>
    <script>
        let body = document.querySelector('body')
        let div = document.querySelector('div')
        let p = document.querySelector('p')
        body.onclick = function(){
           console.log('body');
        }
        div.onclick = function(){
           console.log('div');
        }
        p.onclick = function(){
            console.log('p');
        }
    </script>
</body>

点击p标签，也会触发body和div的事件
如何解决呢？
我们可以加上e.stopPropagation来阻止事件冒泡

<body>
    <div>
        <p>12312</p>
    </div>
    <script>
        let body = document.querySelector('body')
        let div = document.querySelector('div')
        let p = document.querySelector('p')
        body.onclick = function(){
           console.log('body');
        }
        div.onclick = function(){
           console.log('div');
        }
        p.onclick = function(e){
            e.stopPropagation();
            console.log('p');
        }
    </script>
</body>