有关DOM Event事件和自定义Event相关文档文章介绍速记

callmewhy 发布于2019-08-23 13:41 / 2385人阅读

摘要：搞清之间的关系指的事件绑定时的对象指的事件发生所在的对象，例如你的把事件可以绑在父元素上，点击子元素，此时指的是父元素，指的是你点击的子元素。是一个非标准属性，是老对于的实现，指的事件发生所在的对象。

搞清Event.currentTarget、Event.target、Event.srcElement之间的关系

Event.currentTarget： https://developer.mozilla.org...

Event.target： https://developer.mozilla.org...

Event.srcElement： https://developer.mozilla.org...

Event.currentTarget指的事件绑定时的DOM对象；

Event.target指的事件发生所在的DOM对象，例如你的把事件可以绑在父元素上，点击子元素，此时Event.currentTarget指的是父元素，Event.target指的是你点击的子元素。

Event.srcElement是一个非标准属性，是老IE对于Event.target的实现，指的事件发生所在的DOM对象。

自定义事件相关的API

快速了解如何自定义事件和触发的demo：https://developer.mozilla.org...

CustomEvent Constructor 用来创建自定义事件的API（标准推荐）：https://developer.mozilla.org...

document.createEvent()（老旧浏览器创建自定义事件API，已被废弃，不推荐，但可以作为兼容旧浏览器使用）：https://developer.mozilla.org...

如何利用document.createEvent()来实现CustomEvent Constructor 的兼容： https://github.com/tuxsudo/po...

IE8不支持document.createEvent()和CustomEvent Constructor，创建自定义可以利用 propertychange 类型事件
来兼容，张鑫旭老师在js-dom自定义事件一文中有介绍这种技巧，重点可以阅读【四、伪DOM自定义事件】一节： https://www.zhangxinxu.com/wo...

Comparison of Event Targets

https://developer.mozilla.org...

Property	Defined in	Purpose
event.target	DOM Event Interface	The DOM element on the lefthand side of the call that triggered this event, eg: `element.dispatchEvent(event)`
event.currentTarget	DOM Event Interface	The EventTarget whose EventListeners are currently being processed. As the event capturing and bubbling occurs this value changes.
event.relatedTarget	DOM MouseEvent Interface	Identifies a secondary target for the event.
event.explicitOriginalTarget	nsIDOMNSEvent.idl	If the event was retargeted for some reason other than an anonymous boundary crossing, this will be set to the target before the retargeting occurs. For example, mouse events are retargeted to their parent node when they happen over text nodes (bug 185889), and in that case .target will show the parent and .explicitOriginalTarget will show the text node. Unlike .originalTarget, .explicitOriginalTarget will never contain anonymous content.
event.originalTarget	nsIDOMNSEvent.idl	The original target of the event, before any retargetings. See Anonymous Content#Event_Flow_and_Targeting for details.

MouseEvent.relatedTarget

https://developer.mozilla.org...

The MouseEvent.relatedTarget read-only property is the secondary target for the event, if there is one. That is:

Event name	target	relatedTarget
focusin	The EventTarget receiving focus	The EventTarget losing focus
focusout	The EventTarget losing focus	The EventTarget receiving focus
mouseenter	The EventTarget the pointing device entered to	The EventTarget the pointing device exited from
mouseleave	The EventTarget the pointing device exited from	The EventTarget the pointing device entered to
mouseout	The EventTarget the pointing device exited from	The EventTarget the pointing device entered to
mouseover	The EventTarget the pointing device entered to	The EventTarget the pointing device exited from
dragenter	The EventTarget the pointing device entered to	The EventTarget the pointing device exited from
dragexit	The EventTarget the pointing device exited from	The EventTarget the pointing device entered to

关于MouseEvent.relatedTarget用法的演示： https://jsfiddle.net/uTe99

Interface Event

[Constructor(DOMString type, optional EventInit eventInitDict),

 Exposed=(Window,Worker,AudioWorklet)]

interface Event {

  readonly attribute DOMString type;

  readonly attribute EventTarget? target;

  readonly attribute EventTarget? srcElement; // historical

  readonly attribute EventTarget? currentTarget;

  sequence composedPath();



  const unsigned short NONE = 0;

  const unsigned short CAPTURING_PHASE = 1;

  const unsigned short AT_TARGET = 2;

  const unsigned short BUBBLING_PHASE = 3;

  readonly attribute unsigned short eventPhase;



  void stopPropagation();

           attribute boolean cancelBubble; // historical alias of .stopPropagation

  void stopImmediatePropagation();



  readonly attribute boolean bubbles;

  readonly attribute boolean cancelable;

           attribute boolean returnValue; // historical

  void preventDefault();

  readonly attribute boolean defaultPrevented;

  readonly attribute boolean composed;



  [Unforgeable] readonly attribute boolean isTrusted;

  readonly attribute DOMHighResTimeStamp timeStamp;



  void initEvent(DOMString type, optional boolean bubbles = false, optional boolean cancelable = false); // historical

};



dictionary EventInit {

  boolean bubbles = false;

  boolean cancelable = false;

  boolean composed = false;

};

云服务器 GPU云服务器 event事件 js Event? Event event log

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

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

【重温基础】20.事件

摘要：本文是重温基础系列文章的第二十篇。事件捕获为截获事件提供机会，然后实际的目标接收到事件，最后事件冒泡，对事件作出响应。事件处理事件处理，即响应某个事件。包括导致事件的元素事件类型等其他信息。本文是重温基础系列文章的第二十篇。这是第三个基础系列的第一篇，欢迎持续关注呀！重温基础系列的【初级】和【中级】的文章，已经统一整理到我的【Cute-JavaScript】的Java...

Blackjun 2019-08-26 13:28 评论0 收藏0
impress.js 源码分析

摘要：从源码的起就是主函数和大，主函数我们可以再看它先引入然后调用这个函数那么我们接下来重点来研究这个函数初始值第一步我们简历来支持手机设备是一个函数，本人觉得就是借鉴了的源码。前言之前做简历用到了impress.js，就像网页版的preiz，简直酷炫！贴上我的简历地址：可是没想到昨天师兄内推我说需要看懂impress.js源码，这样才能体现你学习钻研的精神。orz。。真是挖个坑坑把自...

ThinkSNS 2019-08-21 10:36 评论0 收藏0
DOM 事件详解

摘要：与此同时，我们获得了回调函数的句柄，从而可以随时从元素上移除相应的事件监听。对象会被作为第一个参数传递给事件监听的回调函数。 Click、touch、load、drag、change、input、error、risize — 这些都是冗长的DOM（文档对象模型）事件列表的一部分。事件可以在文档(Document)结构的任何部分被触发，触发者可以是用户操作，也可以是浏览器本身。事件并不是...

tianhang 2019-08-19 14:24 评论0 收藏0
浏览器内核之 HTML 解释器和 DOM 模型

摘要：书接上文浏览器内核之资源加载与网络栈本文介绍的模型之后，深入的核心部分，剖析的解释器是如何将从网络或者本地文件获取的字节流转成内部表示的结构树。事件处理最重要就是事件捕获和事件冒泡这两种机制。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公众号：爱写bugger的阿拉斯加如有问题或建议，请后台留言，我...

Carbs 2019-08-02 16:04 评论0 收藏0
《JavaScript 闯关记》之事件

摘要：事件捕获团队提出的另一种事件流叫做事件捕获。所有节点中都包含这两个方法，并且它们都接受个参数要处理的事件名作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是，表示在捕获阶段调用事件处理程序如果是，表示在冒泡阶段调用事件处理程序。 JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下，当文档、浏览器、元素或与之相关的对象发生某些有趣的事情时，Web 浏览器...

ConardLi 2019-08-22 10:44 评论0 收藏0