JS事件委托

事件委托

通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。

实现事件委托步骤：

                1、先找到父节点或者祖先节点
                2、将事件添加到找到的节点上
                3、判断触发对象，是否符合条件，然后进行后续操作

例子

例如点击ul下的li标题

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                width: 200px;
                height: 400px;
                background-color: gray;
            }
            ul li {
                width: 200px;
                line-height: 100px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>标题</li>
            <li>标题</li>
            <li>标题</li>
            <li>标题</li>
        </ul>
    </body>
    <script>
        var oul =document.querySelector("ul")
        oul.onclick=function(eve){
            var e = eve ||window.event;
            var target = e.target || e.srcElement;
            console.log(target)
            if(target.nodeName =="LI"){
                target.style.backgroundColor="red"
            }
        }
    </script>
    </html>
posted @ 2020-06-22 20:51  Cupid05  阅读(109)  评论(0)  编辑  收藏  举报