细说event.currentTarget & event.target的不同使用

codercao 发布于2019-08-21 16:44 / 959人阅读

摘要：有的时候注册事件的监听者并不是事件的触发者，实际事件的触发者是，事件目标是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器。中删除事件侦听器。将事件分派到此。事件本身包含所有事件通用的属性和方法。

dom event简介

Event接口表示在DOM中发生的任何事件; 一些是用户生成的（例如鼠标或键盘事件），而其他由API生成(例如指示动画已经完成运行的事件，视频已被暂停等等)。事件添加有以下几个方法：

EventTarget.addEventListener
注意: Internet Explorer 6-8 并不支持这个方法，而是提供了类似的 element.attachEvent API 。如果要进行跨浏览器使用，请考虑使用有效的JavaScript 库。

html的属性添加

可以看到输出如下：

具体的说就是event.currentTarget是注册事件时所指向的元素，而event.target是响应事件的最小子元素，也就是最深层级的触发事件的元素，需要开发者合理使用。
可以分情况使用：

event.currentTarget在注册事件时如果希望获取事件监听者的相关属性数据而不是出发事件的子元素的一些属性或者数据的话，可以使用。

event.target适合监听者是自身的时候，所以很多可点击的元素都没有孩子元素。

注意：很多时候我们需要做区域点击响应，这样的话需要注意你点击时需要操作的数据，因为触发事件的元素是不确定的，但是可以考虑把数据放在监听者的属性中，这样使用event.currentTarget来获取诗句就是可靠地行为

云服务器 GPU云服务器细说linux php细说细说php 细说linux 书籍

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88671.html

重探浏览器事件(浅析事件编程化)

前言在平常开发过程中,就算不使用现在主流的框架也至少得使用个Jquery,这些工具帮我们统一不同浏览器平台之间的差异和细节,可以将注意力集中到开发上来. 不过有意思的一点是,在看完高程的N年后我居然连event对象中的target和currentTarget属性的区别都忘记了. 先提几个引子: 你能说出event.currentTarget和event.target的区别吗? 如果可以那么ev...

lk20150415 2019-08-02 16:09 评论0 收藏0
重探浏览器事件(浅析事件编程化)

前言在平常开发过程中,就算不使用现在主流的框架也至少得使用个Jquery,这些工具帮我们统一不同浏览器平台之间的差异和细节,可以将注意力集中到开发上来. 不过有意思的一点是,在看完高程的N年后我居然连event对象中的target和currentTarget属性的区别都忘记了. 先提几个引子: 你能说出event.currentTarget和event.target的区别吗? 如果可以那么ev...

phodal 2019-08-26 13:39 评论0 收藏0
DOM事件机制

摘要：而事件分为个级别级事件处理，级事件处理和级事件处理。一个事件发生后，会在子元素和父元素之间传播。也就是说，始终是监听事件者，而是事件的真正发出者。五参考文章级别与事件事件机制解惑事件模型事件委托详解事件的学与记和和的区别前言本文主要介绍DOM事件级别、DOM事件模型、事件流、事件代理和Event对象常见的应用，希望对你们有些帮助和启发！本文首发地址为GitHub博客,写文章不易，...

laznrbfe 2019-08-23 13:53 评论0 收藏0
DOM事件机制

摘要：而事件分为个级别级事件处理，级事件处理和级事件处理。一个事件发生后，会在子元素和父元素之间传播。也就是说，始终是监听事件者，而是事件的真正发出者。五参考文章级别与事件事件机制解惑事件模型事件委托详解事件的学与记和和的区别前言本文主要介绍DOM事件级别、DOM事件模型、事件流、事件代理和Event对象常见的应用，希望对你们有些帮助和启发！本文首发地址为GitHub博客,写文章不易，...

cooxer 2019-08-02 12:10 评论0 收藏0