this和target

最新推荐文章于 2022-09-15 22:58:34 发布

SpaceX7_s

最新推荐文章于 2022-09-15 22:58:34 发布

阅读量178

点赞数

文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/weixin_45842954/article/details/121986573

版权

事件对象event

this ：返回绑定事件的对象(元素)，绑定谁返回谁
target: 返回响应事件的对象(元素)，点击谁返回谁

 <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        ul li {
            background-color: powderblue;
        }
    </style>
    <script>
        window.onload = function() {
            //this 谁绑定了事指向谁，target点击谁指向谁
            /* 
              this返回绑定事件对象(元素)  target返回触发事件的对象(元素)
            */
           var ul = document.querySelector('ul');
            ul.addEventListener('click',function(event){
                alert('li');
                console.log(this);//返回ul，this返回绑定事件的对象
                console.log(event.target); //返回li ，li对象触发了事件
            },false)

        }
    </script>
</head>
<body>
    <div></div>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>