javascript addEventListener中的e.target和this的区别

最新推荐文章于 2023-09-29 12:30:00 发布
最新推荐文章于 2023-09-29 12:30:00 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： javascript高级 es5/es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjsfdx/article/details/78375332
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style type="text/css">

</style>
</head>

<body>

    <div id="box">
        <ul>
            <li>我是第1个li</li>
            <li>我是第2个li</li>
            <li>我是第3个li</li>
            <li>我是第4个li</li>
            <li>我是第5个li</li>
            <li>我是第6个li</li>
        </ul>
    </div>

   <script>

    var oDiv = document.getElementById('box');      //返回box元素

    //注册click事件
    oDiv.addEventListener('click',function(e){
        //event.target表示发生点击事件的元素
        //this始终指向绑定事件的元素也就是div 和event.currentTarget相等

        console.log(this);
        console.log(e.currentTarget);
        console.log(e.target);

        var l = e.target;
        if(l){
            alert(l.innerHTML);
        }
    });

   </script>

</body>
</html>

这里写图片描述

UIEngineer
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
e.target 和 this 的区别以及键盘事件的应用
m0_72313625的博客
08-30 1340
e.target 返回的是触发事件的对象（元素）this 返回的是绑定事件的对象（元素） 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
JavaScript中this关键字使用方法详解
10-31
JavaScript作为一种广泛使用的脚本语言，同样引入了`this`关键字，不过由于JavaScript的独特性（如其动态性和弱类型特性），导致在实际应用过程中，`this`的使用往往更为复杂多变。 本文将详细介绍JavaScript中`...
addEventListener中this指向
xiaozhu2hao的专栏
05-18 1696
var obj = function() {...} // 将某事件绑定至某对象e，但事件函数中上下文保持为obj obj.prototype.bindEvn = function(e){ e.addEventListener(Event,obj.method.bind(this),false) } obj.prototype.method = function(){...
addEventListener方法，以及addEventListener中事件函数的this指向
foreverhot1019的博客
01-14 5922
addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，所以，这种绑定事件的方法必须要处理浏览器兼容问题。 语法 对象.addEventListener(事件名称,事件处理函数,布尔值) 参数 事件名称 是一个字符串...
addEventListener中事件函数的this指向
Egret_or_Unity的博客
04-17 2175
addEventListener中事件函数的this指向
EventTarget.addEventListener()事件监听
weixin_49602426的博客
09-11 771
事件监听：也叫注册事件、绑定事件。用户与网页的交互动作；比如说鼠标滑动、点击网页。是为了让计算机随时能够发现这个时间发生了，从而执行程序员下达的指令动作，也就是我们封装起来函数里面需要执行的。以on开头的传统注册方式，比如说onclick、onmousemove等。addEventListener()+不带on的事件类型的注册方式。
addeventlistener事件参数_浏览器事件模型
weixin_39962889的博客
11-22 287
什么是事件我想你很可能听说过事件驱动, 但是事件驱动到底是什么？为什么说浏览器是事件驱动的呢？为什么 NodeJS 也是事件驱动的 ？ 两者是一回事么？实际上不管是浏览器还是 Nodejs 都是事件驱动的，都有自己的事件模型。在这里，我们只讲解浏览器端的事件模型，如果对 Nodejs 事件模型感兴趣的，请期待我的 Nodejs 部分的讲解。事件驱动通俗地来说就是什么都抽象为事件。一次点击是一个事件...
JavaScript中的事件处理程序（addEventListener）
01-08
总结来说，`addEventListener`是JavaScript中处理事件的关键工具，它提供了强大的灵活性和控制力，使得开发者能够优雅地响应用户行为和系统变化。理解并熟练运用`addEventListener`是成为一名优秀的前端开发人员的...
Javascript this关键字使用分析
10-30
JavaScript 中的 `this` 关键字是一个非常重要的概念，它在不同上下文中有着不同的指向。在 JavaScript 中，`this` 的值取决于函数调用的方式，而不是函数声明的方式。以下是对 `this` 关键字在不同场景下工作的详细...
详解EventTarget.addEventListener事件注册方法
Neekky的博客
11-04 920
EventTarget.addEventListener()方法将指定的监听器注册到EventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行。 事件目标可以是一个文档上的元素Element,Document和Window或者任何其他支持事件的对象 (比如XMLHttpRequest)。 addEventListener()的工作原理是将实现EventListener...
vue addeventlistener_vue 随记（1）：数据劫持
weixin_39724266的博客
11-20 412
引子开发中可能时常遇到这种问题：开发一个计算器界面如下，html 结构为： id="minus">- type="number" id="r"> id="plus">+ r2 = id="square"> r3 = id="cube">要求：点击加减号，输入框内容自动增加或减去1，输入时允许数字，当数字变动时，自动更新下面的r平方...
关于浏览器事件addEventListener()处理小记
RexingLeung的博客
03-27 822
前言 当浏览器与对象 , 元素发生互动时 , 浏览器会产生对应的事件 , 例如 : 浏览器加载完文档 , 用户把鼠标指针移动超链接上或者敲击键盘等 , 浏览器都会产生事件 , 而且JavaScript还可以对一些特定类型的事件进行函数绑定以做一些自定义的事件 EventTarget.addEventListener() EventTarget.addEventListener() 方法将指定...
Vue 中addEventListener事件回调函数this的指向
XIAIBIANCHENG的专栏
01-22 4987
在Vue中调用document.addEventListener添加事件回调函数,在回调函数中调用this对象时，通过调试发现，this指向的是之前调用document.addEventListener的Vue对象或者Vue组件示例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &l
【JS】addEventListener方法介绍
红尘道，红尘练心
09-07 6059
第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；使用 attachEvent 方法有个缺点，this 的值会变成 window 对象的引用而不是触发事件的元素。addEventListener()，事件监听，用于向指定的元素添加事件监听。在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件。在冒泡中，内部元素的事件会先被触发，然后再触发外部元素；(它允许给一个事件注册多个监听器，且不会覆盖已存在的事件)事件的传递有两种方式：冒泡与捕获。
js addEventListener和attachEvent函数中的this的指向问题及解决方法
全赞功成湿的博客
01-16 4193
这篇文章主要讲解addEventListener和attachEvent函数中的this的指向问题，addEventListener中的this指向调用它的对象，而attachEvent函数中的this指向window对象，并提供了一个方法（使用e.target和e.srcElement代替this）来解决问题。
e.target+addEventListener事件委托
...
08-24 300
e.target+addEventListener事件委托 <!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
Vuejs中使用addEventListener的事件触发执行函数的this
热门推荐
nzyalj的博客
04-24 2万+
addEventListener => this
关于addEventListener中事件函数的this指向问题
weixin_30436101的博客
04-20 382
看代码： //定义一个可见的盒子用于绑定点击事件 var box = document.getElementById('box'); box.x = 'box' //设置执行函数的对象属性 function outFunc() { this.x = 'outFunc'; box.addEventListener('click', func, false); ...
【JS】JS的事件监听以及addEventListener的第三个参数
最新发布
owo_ovo的博客
09-29 435
JS的事件监听以及addEventListener的第三个参数
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值