Event事件学习实用路线（4）——Event事件之事件源

最新推荐文章于 2021-08-16 10:43:29 发布

溜_x_i_a_o_迪

最新推荐文章于 2021-08-16 10:43:29 发布

阅读量441

点赞数 1

分类专栏： # JS——Event事件原生JavaScript Web前端文章标签： javascript js event html 前端

本文链接：https://blog.csdn.net/u013946061/article/details/105742070

版权

原生JavaScript 同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

Web前端

32 篇文章 0 订阅

订阅专栏

JS——Event事件

11 篇文章 0 订阅

订阅专栏

事件源

Event事件对象

e.target 事件源
e.currentTarget 事件绑定的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            margin: 100px auto;
        }
        p{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
    <script>
        var div=document.querySelector('div');
        var p=document.querySelector('p');

        div.addEventListener('click',function(e){
            console.log("e.target:  ");
            console.log(e.target);
            console.log("e.currentTarget:  ");
            console.log(e.currentTarget);
        })
    </script>
</body>
</html>

在这里插入图片描述
注意：e.target 事件触发的目标源元素，它可能会有变化，因为是目标源元素。
e.currentTarget 事件绑定的元素，它是固定不变的，因为事件绑定的元素是不变的。

事件委托（事件代理）

利用冒泡机制将事件统一委托在父级上执行，在通过事件源获取到相关元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        li{
            width: 100px;
            height: 100px;
            background: red;
            margin: 50px 0;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
        </ul>
    </div>
    <script>
        var ul=document.querySelector('ul');
        
        ul.addEventListener('click',function(){
            alert('点击事件');
        })
    </script>
</body>
</html>

点击ul和li都会触发事件。
在这里插入图片描述

其实原理是你点击子级，父级会接收到它父级冒泡的行为（因为子级就在父级里边，点击子级就相当于也点了父级），而打算给li加事件，目的是为了改变li的某种特性。假如让li点击之后背景色变黄，怎么实现？这里给ul添加事件，而不能操作ul本身，需要操作li的本身，因此这里就可以用到事件对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        li{
            width: 100px;
            height: 100px;
            background: red;
            margin: 50px 0;
        }
        p{
            width: 50px;
            height: 50px;
            background: blue;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>
                <p></p>
            </li>
            <li>
                <p></p>
            </li>
            <li>
                <p></p>
            </li>
            <li>
                <p></p>
            </li>
        </ul>
    </div>
    <script>
        // 事件委托（父级）
        var ul=document.querySelector('ul');

        // li点击之后背景色变黄
        ul.addEventListener('click',function(e){
            // 获取事件源 元素
            console.log(e.target);
        })
    </script>
</body>
</html>

在这里插入图片描述
我们借助事件源来修改样式，就可以实现我们的需求了。

        // 事件委托（父级）
        var ul=document.querySelector('ul');

        // li点击之后背景色变黄
        ul.addEventListener('click',function(e){
            e.target.style.background='yellow';
        })

虽然改变了事件源（li）元素的样式，但只给ul添加了事件，这其实就叫事件委托。就相当于把事件加给别人，但是自己触发的时候还能用这个事件。
在这里插入图片描述

但是假如只想修改li的样式呢？
判断目标元素是否是你想添加事件的元素

        // 事件委托（父级）
        var ul=document.querySelector('ul');

        // li点击之后背景色变黄
        ul.addEventListener('click',function(e){
            console.log(e.target.tagName);
        })

tagName是便签名称，注意它是大写的。
在这里插入图片描述
因此我们可以借助事件源名称判断是否为li，这样我们的需求就实现了。

        // 事件委托（父级）
        var ul=document.querySelector('ul');

        // li点击之后背景色变黄
        ul.addEventListener('click',function(e){
            // 判断目标元素是否是你想添加事件的元素
            if(e.target.tagName=='LI'){
                e.target.style.background='yellow';
            }
        })