JavaScript事件进阶：事件对象e(event)（三）

已于 2022-06-04 14:56:49 修改
阅读量3.9k 收藏 17
点赞数 7
分类专栏： JavaScript 文章标签： javascript 前端 开发语言
于 2021-08-16 10:43:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40981660/article/details/119725467
版权

本章字数7873字。

上一篇文章《JavaScript进阶认识：什么是事件冒泡过程与捕获过程？有什么用处？》我们讲到事件对象e，利用了一个方法e.target，通过冒泡过程，从而实现了点击父级元素里面的子元素触发父级元素事件，再从父级元素事件对象e，找到真正触发事件发生的子元素源，实现隔行换色的代码。这个技巧要认真琢磨。

那么，什么是事件对象e呢？

事件对象e，是event的简称。当一个事件被触发时候，这个事件的有关数据都会被存储在一个事件对象e里面，这个对象e有许多固定方法提供给我们查看里面各种数据。

我们打个比方去理解这个事件e，比如飞机失事，飞机相当于是事件源，失事是事件类型，那么当这个事件源【飞机】触发了事件类型【失事】时，人们就会通过查询飞机黑匣子里面的相关数据去了解整个事件发生的经过，而这个黑匣子就是事件对象e。

了解了什么是事件对象后，我们来学习事件对象常用的方法：

事件对象方法解释
e.eventPhase查看事件触发时所处的阶段
e.target用于获取触发事件的元素（e.srcElement 用于获取触发事件的元素，低版本浏览器使用）
e.currentTarget用于获取绑定事件的事件源元素
e.type获取事件类型
e.clietX / e.clientY所有浏览器都支持，鼠标距离浏览器窗口左上角的距离

我们一个个来解释

1.测试e.eventPhase

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #box1{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
        }
        #box2{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #box3{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        // 获取元素
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var box3 = document.getElementById("box3");
        
        // 添加事件
        box1.onclick = function (e) {
            // e指的就是存储事件对象的参数，只要事件被触发（即box1被点击），e就会自动接收数据
            e = e || window.event; // 解决兼容问题
            // e.eventPhase 判断出事件执行时处于哪个阶段
            // 1：捕获阶段
            // 2：目标阶段（指的是事件真正执行的阶段）
            // 3：冒泡阶段
            console.log(e.eventPhase);
        };
    </script>
</body>
</html>

效果如下：

请添加图片描述
解释：我们需要知道控制台显示3和2的所代表信息，在验证事件所处阶段中，1表示捕获过程，2表示事件执行过程，3表示冒泡过程。事件阶段只有三种情况：一是冒泡过程，二是捕获过程，三是既没有冒泡过程也没有捕获过程（第三种情况先不用管），这跟非黑即白成语含义是一样的，要么捕获要么冒泡。

因此，点击box3显示的3代表冒泡阶段，点击box2显示的3也代表冒泡阶段，点击box1显示的2代表事件执行阶段，也就是说box1是真正的事件发生地，但到底是谁触发box1事件发生的，要看我们点击是box3、box2、还是box1。

冒泡阶段指的是从哪里使得事件发生的方向【是从父到子方向（捕获），还是从子到父方向（冒泡）】。其中，这个事件指的是box1.onclick。

2.测试e.target

前面，我们知道事件对象e有版本问题，因此我们这样写兼容代码：

e = e || window.event;

e.target也有兼容问题，e.srcElement 用于获取触发事件的元素，低版本浏览器使用，因此我们也这样写代码

var target = e.target | e.srcElement ;

测试e.target代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #box1{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
        }
        #box2{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #box3{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        // 获取元素
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var box3 = document.getElementById("box3");
        
        // 添加事件
        box1.onclick = function (e) {
            // e指的就是存储事件对象的参数，只要事件被触发（即box1被点击），e就会自动接收数据
            e = e || window.event; // 解决兼容问题
            // e.eventPhase 判断出事件执行时处于哪个阶段
            // 1：捕获阶段
            // 2：目标阶段（指的是真正执行的阶段）
            // 3：冒泡阶段
            console.log(e.eventPhase);

            // 获取真正触发事件的元素
            var target = e.target || e.srcElement;
            console.log(target);
        };
    </script>
</body>
</html>

请添加图片描述
解释：从图片我们知道，点击box3则box3元素是触发事件的元素，点击box2则box2是触发事件元素，点击box1是触发事件的源元素。这个事件指的是box1.onclick 。

3.测试e.currentTarget

获取绑定事件的事件源

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #box1{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
        }
        #box2{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #box3{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        // 获取元素
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var box3 = document.getElementById("box3");
        
        // 添加事件
        box1.onclick = function (e) {
            // e指的就是存储事件对象的参数，只要事件被触发，e就会自动接收数据
            // 兼容问题
            e = e || window.event;
            // e.eventPhase 判断出事件执行时处于哪个阶段
            // 1：捕获阶段
            // 2：目标阶段（指的是真正执行的阶段）
            // 3：冒泡阶段
            console.log(e.eventPhase);

            // 获取绑定事件（注册事件）的事件源元素
            console.log(e.currentTarget);
        };
    </script>
</body>
</html>

显示效果如下：
请添加图片描述
解释：从图片我们可以知道，点击任一元素都指向了真正触发事件的源元素box1。

4.测试e.type

e.type测试的事件类型是什么

<!DOCTYPE html>
<html lang="en">
<head>
    <title>测试</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <script>
        // 获取元素
        var box1 = document.getElementById("box1");
        
        // e.type 属性获取事件类型
        box1.onclick = function (e) {
            // 事件对象兼容
            e = e || window.event;
            // 触发的事件类型
            console.log(e.type);
        };
    </script>
</body>
</html>

效果如下;

在这里插入图片描述
控制台显示的click鼠标点击事件。

当然，e.type用处不仅仅局限与此。如果要编写一个鼠标移入和移出事件，很多同学会想到下面这种方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>测试</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <script>
        // 获取元素
        var box1 = document.getElementById("box1");

        // 更多时候可能给同一个元素对象添加不同的事件类型，对应执行的事件函数内部的代码 不同
        box1.onmouseover = function () {
            box1.style.backgroundColor = "skyblue";
        };
        box1.onmouseout = function () {
            box1.style.backgroundColor = "yellowgreen";
        };
    </script>
</body>
</html>

解释：在更多时候，我们会给一个元素对象添加不同事件类型，对应执行事件函数内部的不同代码，但这有一个缺陷，即每创建一个函数就会多占用一个内存，这不利于浏览器的性能优化。

那么如何解决这个【添加多个函数，占用更多的内存】问题呢？答案是将两个函数封装成一个函数。

我们可以将所有给一个元素绑定的事件的事件函数写在一个函数内，通过函数内部的 e.type 判断走不同的分支。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>测试</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <script>
        // 获取元素
        var box1 = document.getElementById("box1");

        box1.onmouseover = fn;
        box1.onmouseout = fn;
        // 避免添加多个函数，占用更多的内存
        function fn(e) {
            e = e || window.event;
            // 根据事件类型，执行不同的代码
            switch (e.type) {
                case "mouseover":
                    box1.style.backgroundColor = "pink";
                    break; 
                case "mouseout":
                    box1.style.backgroundColor = "yellowgreen";  
                    break;                   
            }
        }
    </script>
</body>
</html>

解释：只要触发了box1元素的事件，就产生一个e储存了各种信息，通过e.type查看事件的类型匹配不同的执行方法。

5.测试e.clientX

比如要实现一个需求：实现图片跟随鼠标移动而移动。

<!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>
      * {
        margin: 0;
        padding: 0;
      }
      #pic {
        position: fixed;
      }
    </style>
</head>
<body>
    <img src="images/tianshi.gif" alt="" id="pic">
    <script>
        // 通过 鼠标移动事件给 图片添加 left 和 top 的值
        // 1.获取元素
        var pic = document.getElementById("pic");
        // 2.给整个文档添加鼠标移动事件
        document.onmousemove = function (e) {
          // 2.1、e的兼容写法
          e = e || window.event;
          // 2.2、给元素的css 属性赋值
          pic.style.left = e.clientX + "px";
          pic.style.top = e.clientY + "px";
        };
    </script>
</body>
</html>

实现效果如下：
请添加图片描述
解释：通过e.clientX/e.clientY可以轻易获取鼠标距离左上角的位置，从而改变图片在整个文档的位置。

6.this

注册事件，this指向的是触发事件的源元素

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #box1{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
        }
        #box2{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #box3{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        // 获取元素
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var box3 = document.getElementById("box3");
        
        // 添加事件
        box1.onclick = function (e) {
            e = e || window.event;
            console.log(e.eventPhase);

            // this 指向
            console.log(this);
        };
    </script>
</body>
</html>

this指向box1：
在这里插入图片描述
效果如下：
在这里插入图片描述
常用的用法就是以上的部分了，更多web事件情况从此链接参考：https://developer.mozilla.org/zh-CN/docs/Web/Events

幼儿园园长~
关注
  • 7
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript事件对象event用法分析
10-18
主要介绍了JavaScript事件对象event用法,结合实例形式分析了事件对象event中常用的属性、方法、相关操作技巧与注意事项,需要的朋友可以参考下
javascript：Event事件对象
weixin_52774180的博客
11-28 292
javascript：Event事件对象 本节主要内容： even对象 event对象常用的属性和方法 IE中event对象常用的属性和方法 鼠标滚轮事件 文档事件 事件委托 学习目标： 一、event对象 1.1关于event对象 概念： Event 对象代表事件的状态，当dom tree中某个事件被触发的时候，会同时自动产生一个用来描述事件所有的相关信息（比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。）的对象，这个对象就是event（事件对象）。 ..
事件对象e
weixin_48837605的博客
08-30 432
一.事件对象是什么 事件对象本质是对象,这个对象中里有事件触发时的相关的信息 比如:鼠标点击事件的时候,事件对象中就保存了鼠标点在哪个位置的信息 一般命名为event,ev,e 二.部分常用的属性 type 获取当前的事件类型("click","mousemove" "keyup")等 clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置 offestX/offestY 获取光标相对于当前Dom元素左上角的位置 page...
JavaScript中的事件对象(event)
weixin_42678796的博客
07-08 643
Event事件对象 1.事件基础 事件是什么？ JS中事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。 事件三要素 事件源（被触发的对象） 事件类型（如何触发？） 事件处理程序（触发后发生了什么？）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5bTx7p8D-1594209131138)(C:\Users\lhm\AppData\Roaming\Typora\typora-user-images\image-202007072128111
事件对象event及常见属性
m0_54957758的博客
01-29 317
事件对象event及常见属性
有关javascript中事件对象e
qq_44718039的博客
11-15 2450
js中的事件对象e
JS 之 事件Event对象详解（属性、方法、自定义事件）
weixin_45092437的博客
06-10 7567
​ 事件event对象是指在浏览器中触发事件时，浏览器会自动创建一个event对象，其中存储了本次事件相关的信息，包括事件类型、事件目标、触发元素等等。浏览器创建完event对象之后，会自动将该对象作为参数传递给绑定的事件处理函数，我们可以在事件处理函数中通过访问event对象的属性和方法，来获取事件的相关信息，并做出后续的逻辑处理。
JS使用标签事件属性时, 想取得事件对象E时的写法
d429667292的博客
10-06 2190
如果没有传入event作为参数，在函数内部如何获取event呢？ js对于函数的定义是非常松，即使你在函数定义时未写任何参数，或者你定义的参数有多个，但是你调用时，一个参数也不填，也不会出错的。 因为js函数内默认有个变量，保存你的入参叫：arguments， 他是一个数组，下标从0开始， 所以获取event可以写成 function eventTest(){ var event =...
原生js的事件对象e
u010234868的专栏
06-28 599
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 { width: 300px; height: 300px; background-color: pink; } #box2 { width: 200px; height: 2.
事件对象/事件参数e定义及方法
weixin_43850458的博客
05-14 1311
在事件处理函数中，可以传递一个参数e，这个参数我们叫做事件对象，也叫事件参数。事件对象e是系统传递过去，事件函数也是系统调用的。系统调用事件函数的时候，会给事件函数传递一个参数，传递的参数具有具体值，可以在事件函数执行时获取e中携带的值。 1.e.target 真正触发事件的对象。 2.e.eventPhast 获取事件阶段。 3.e.currentTargert 获取事件处理函数所在的对象。相当于this，如果没有事件冒泡与2相同。 4.e.type 获取事件处理函数名称。 5.e.target
深入分析JavaScript 事件循环(Event Loop)
10-15
主要介绍了JavaScript 事件循环(Event Loop)的的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
全面了解JavaScript对象进阶
10-21
下面小编就为大家带来一篇全面了解JavaScript对象进阶。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript Event事件学习第一章 Event介绍
12-09
可以看看任何有JavaScript代码的网页：几乎所有的例子都有一个事件触发了脚本。原因非常简单。JavaScript就是给你的页面添加内部活动：用户做一些事情然后页面做出回应。 因此JavaScript就需要一个方法能够检测到...
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 384
步骤很详细，直接上教程……
【解决NodeJS项目无法在IDEA中调试的问题】使用JetBrains IDEA 2023 调试nodejs项目
宅斗士的博客
04-23 369
项目采用Ant Design Pro + React，使用前后端分离开发方式，后端可以很容易的打断点调试，但是前端用到了React脚手架，在IDEA中加了调试断点，但是没有什么用处。
vue2---修饰符
weixin_45503872的博客
04-24 1007
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 510
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 406
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
css flex布局两个元素水平居中垂直居中
xiaohua616的博客
04-23 402
使用flex布局，让两个元素水平居中垂直居中，具体实现效果如下：
javascript知识训练：对象与事件
03-16
对象是JavaScript中的重要概念，它是一种数据类型，可以用来表示现实世界中的事物。在JavaScript中，对象可以包含属性和方法，属性是对象的特征，方法是...在训练JavaScript知识时，学习对象和事件是非常重要的一部分。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值