事件委托(事件冒泡)

event.target

一般情况下我们获取目标事件源都是谁是调用者谁就是事件源,但是当有批量的DOM需要操作的时候,要判断哪一个dom是事件源就不是很明确了,使用e.target可以准确地获取事件源,并且在使用的过程中可以比较判断,从而实现我们的代码。直白的来说就是用户的鼠标点击在哪个标签上 e.target 就来自哪里。

event.target: 指的是真正触发事件的那个元素 

event.target.nodeName    // 获取事件触发元素标签name 
event.target.id       // 获取事件触发元素id 
event.target.className   // 获取事件触发元素classname 
event.target.innerHTML   // 获取事件触发元素的内容 

event.currentTarget 

vent.currentTarget 是 JavaScript 中的一个事件对象属性,表示当前正在处理事件的元素 

在事件冒泡过程中,event.currentTarget 会随着事件的传播而不断改变,而 event.target 则保持不变。

event.currentTarget 与 event.target 的区别:

  1. event.target 表示触发事件的元素,而 event.currentTarget 表示当前正在处理事件的元素;
  2. event.target 在事件流的目标阶段,而 event.currentTarget 在事件流的捕获、目标及冒泡阶段;(事件流的过程分为三个阶段:捕获阶段、目标阶段和冒泡阶段)
  3. 当事件处于捕获和冒泡阶段时,event.target 指向被单击的对象,而 event.currentTarget 指向当前事件活动的对象(一般为父级)。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul li {
            display: block;
            width: 100px;
            height: 50px;
            background-color: gray;
            margin-top: 30px;
            cursor: pointer;
        }

        .active {
            background-color: red;
        }
    </style>
</head>

<body>
    <ul id="box">
        <!-- <ul id="box" onclick="change"> 这里这么用的话就不用下面的监听了 -->
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        const box = document.getElementById('box')
        // change函数里一定要传入event参数,是因为您需要访问这个对象
        // 来获取关于触发事件的信息,以便根据这些信息来执行相应的操作
        const change = function (event) {
            event = event || window.event // 兼容旧版 IE 浏览器(change要传参就是因为这里用到了)
            const target = event.target || event.srcElement; // 兼容旧版 IE 浏览器(比如 IE8 及以下)
            if (target && target.nodeName === 'LI' && target.parentNode === box) {
                const lis = box.getElementsByTagName('li')
                for (let i = 0; i < lis.length; i++) {
                    lis[i].classList.remove('active')
                }

                event.target.classList.add('active')
            }
        }
        box.addEventListener('click', change) // 将监听器直接添加到目标元素或其父元素主要是高效和准确
        // winow.addEventListener('click', change) window可以捕获整个文档中的事件
    </script>
</body>

</html>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值