js事件委托

Posted web-前端工程师

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js事件委托相关的知识,希望对你有一定的参考价值。

事件委托主要用于一个父容器下面有很多功能相仿的子容器,这时候就需要将子容器的事件监听交给父容器来做。父容器之所以能够帮子容器监听其原理是事件冒泡,对于子容器的点击在冒泡时会被父容器捕获到,然后用e.target来判断到底是哪个子容器触发了事件

示例代码:

技术分享图片
<html>
    <head></head>
    <body>
        <ul id="myul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
    <script type="text/javascript">
        var ul = document.getElementById("myul")
        ul.addEventListener(‘click‘,function(e){
            alert("选中了:"+e.target.innerHTML)
            console.log(e.target)
        })
    </script>
</html>
技术分享图片

点击第二个li,console输出<li>2</li>从console的输出我们可以判断出e.target返回的是触发事件的element类型

然后我们看看这个事件委托会不会冒泡

技术分享图片
<html>
    <head></head>
    <body>
        <div id="mydiv">
            <div>
            234
                <p>123</p>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var div = document.getElementById("mydiv")
        div.addEventListener(‘click‘,function(e){
            alert("选中了:"+e.target.innerHTML)
            console.log(e.target)
        })
    </script>
</html>
技术分享图片

点击p,发现只有p的事件触发了,上一级的父组件并没有被输出,所以事件委托中e.target就单指那个被点击的组件

最后试一下stopPropagation会不会阻止委托的父元素接收事件

技术分享图片
<html>
    <head></head>
    <body>
        <ul id="myul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
    <script type="text/javascript">
        var ul = document.getElementById("myul")
        ul.addEventListener(‘click‘,function(e){
            alert("选中了:"+e.target.innerHTML)
            console.log(e.target)
        })
        document.getElementsByTagName("li")[0].addEventListener(‘click‘,function(e){
            e.stopPropagation()
        })
    </script>
</html>
技术分享图片

由于阻断了了事件冒泡,所以点击第一个li没有反应。

以上是关于js事件委托的主要内容,如果未能解决你的问题,请参考以下文章

JS中的事件(对象,冒泡,委托,绑定)

js事件委托

(JS 事件委托)如何删除目标元素?

js事件委托

js事件代理(事件委托)最简单的理解

JS 中的事件绑定事件监听事件委托