JavaScript事件解析

1、事件流

1.1、事件冒泡

1.2、事件捕获

1.3、DOM事件流

2、事件处理程序

2.1、HTML事件处理程序

2.2、DOM0级事件处理程序

2.3、DOM2级事件处理程序

"DOM2级事件"定义了两个方法，用于处理制定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中共都包含这两个方法，并且他们都接受三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔参数值如果为true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

2.4、IE事件处理程序

2.5、跨浏览器的事件处理程序

3、事件对象

3.1、DOM中的事件对象

3.2、IE中的事件对象

3.3、跨浏览器的事件对象

4、事件类型

4.1、UI事件

4.2、焦点事件

4.3、鼠标与滚轮事件

4.4、键盘与文本事件

4.5、复合事件

4.6、变动事件

4.7、HTML5事件

4.8、设备事件

4.9、触摸与手势事件

5、内存和性能

5.1、事件委托

如果可行的话，也可以考虑为document对象添加一个事件处理程序，用以处理页面上发生的某种特定类型的事件。这样做与采用传统的做法相比具有如下优点：

#document对象很快就可以访问，而且可以在页面生命周期的任何时点上为它添加事件处理程序（无需等待DOMContentLoaded或load事件）。话句话说，只要可以单击的元素呈现在页面上，就可以立即具备适当的功能。

#在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的DOM引用更少，所花的时间也更少。

#整个页面占用的内存空间更少，能够提升整体性能。

最适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup和keypress。虽然mouseover和mouseout事件也冒泡，但要适当处理他们并不容易，而且经常需要计算元素的位置。（因为当鼠标从一个元素移到其子节点时，或者当鼠标移出该元素时，都会触发mouseout事件。）

5.2、移除事件处理程序

每当将事件处理程序指定给元素时，运行中的浏览器代码与支持页面交互的JavaScript代码之间就会建立一个连接。这种连接越多，页面执行起来就越慢。如前所述，可以采用事件委托技术，限制建立的连接数量。另外，在不需要的时候移除事件处理程序，也是解决这个问题的一种方案。内存中留有那些过时不用的“空事件处理程序”（dangling event handler），也是造成Web应用程序内存与性能问题的主要原因。

在两种情况，可能会造成上述问题。第一种情况就是从文档中移除带有事件处理程序的元素时。这可能是通过纯粹的DOM操作，例如使用removeChild()和replaceChild()方法，但更多地是发生在使用innerHTML替换页面中某一部分的时候。如果带有事件处理程序的元素被innerHTML删除了，那么原来添加到元素中的事件处理程序极有可能无法被当做垃圾回收。如果你知道某个元素即将被移除，那么最好手工移除事件处理程序。

注意，在事件处理程序中删除按钮也能阻止事件冒泡。目标元素在文档中是事件冒泡的前提。

采用事件委托技术也有助于解决这个问题。如果事先知道将来有可能使用innerHTML替换掉页面中的某一部分，那么就可以不直接把事件处理程序添加到该部分的元素中。而通过把事件处理程序指定给较高层次的元素，同样能够chuli该区域中的事件。

导致“空事件处理程序”的另一种情况，就是卸载页面的时候。毫不奇怪，IE8及更早版本在这种情况下依然是问最多的浏览器，尽管其他浏览器或多或少也有类似的问题。如果在页面被卸载之前没有清理干净事件处理程序，那它们就会滞留在内存中。每次加载完页面再卸载页面时（可能是在两个页面间来回切换，也可以是单击了“刷新”按钮），内存中滞留的对象数目就会增多，因为事件处理程序占用的内存并没有被释放。

一般来说，最好的做法是页面卸载之前，先通过onunload事件处理程序移除所有事件处理程序。在此，事件委托技术再次表现出它的优势——需要跟踪的事件处理程序越少，移除它们就越容易。对这种类似撤销的操作，我们可以把它想象成：只要是通过onload事件处理程序添加的东西，最后都要通过onunload事件处理程序将它们移除。

不要忘了，使用onunload事件处理程序意味着页面不会被缓存在bfcache中。如果你在意这个问题，那么就只能在IE中通过onunload来移除事件处理程序了。

6、模拟事件

6.1、DOM中的事件模拟

模式一个事件分三步：

1、可以在document对象上使用createEvent()方法创建event对象。这个方法接受一个参数，即表示要创建的事件类型的字符串。在DOM2级中，所有这些字符串都使用英文复数形式，而在DOM3级中都变成了单数。这个字符串可以是下列几字符串之一。

#UIEvents：

#MouseEvents：一般化的鼠标事件。鼠标事件和键盘事件都继承自UI事件。DOM3级中是UIEvent。

#MutationEvents：一般化的DOM变动事件。DOM3级中是MutationEvent。

#HTMLEvents：一般化的html事件。没有对应的DOM3级事件（HTML事件被分散到其他类别中）。

2、使用与事件有关的信息对其初始化。

3、模拟事件的最后一步就是触发事件。这一步需要使用dispatchEvent()方法，所有支持事件的DOM节点都支持这个方法。调用这个方法时，需要传入一个参数，即表示要触发事件的event对象。

6.1、模拟鼠标事件

createEvent()传入字符串“MouseEvents”。返回的对象有一个名为initMouseEvent()方法，用于指定与该鼠标事件有关的信息。这个方法接受15个参数，分别与鼠标事件中每个典型的属性一一对应：type、bubbles、cancelable、view、detail、screenX、screenY、clientX、clientY、ctrlKey、altKey、shiftKey、metaKey、button、relatedTarget。

6.2、模拟键盘事件

前面曾经提到过,"DOM2级事件"中没有就键盘事件做出规定，因此模拟键盘事件并没有现成的思路可循。”DOM2级事件“的草案中本来包含了键盘事件，但在定稿之前又被删除了；Firefox根据其草案实现了键盘事件。需要提醒大家注意的是，”DOM3级事件“中的键盘事件与曾包含在"DOM2级事件”草案中的键盘事件有很大区别。

DOM3级规定，调用createEvent()并传入字符串“keyboardEvent”就可以创建一个键盘事件。返回的事件对象会包含一个initKeyEvent()方法，这个方法接受一下参数：type、bubbles、cancelable、view、key、location、modifiers、repeat。

6.3、模拟其他事件

虽然鼠标事件和键盘事件是在浏览器中最经常使用的事件，但有时候同样需要模拟变动事件和HTM事件。

要模拟变动事件，可以使用createEvent("MutationEvents")创建一个包含initMutationEvent()方法的变动事件对象。这个方法接受的参数包括：type、bubbles、·cancelable、relatedNode、preValue、newValue、attrName和attrChange。

要模拟HTML事件，同样需要先创建一个event对象——通过createEvent("HTMLEvents"),然后再使用这个对象的initEvent()方法来初始化它即可。

6.4、自定义DOM事件

DOM3级还定义了“自定义事件”。自定义事件不由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建新的自定义事件，可以调用createEvent("CustomEvent")。返回的对象有一个名为initCustomEvent()的方法，接受如下四个参数：

#type(字符串)：触发的事件类型，例如“keydown”。

#bubbles（布尔值）：表示事件是否应该冒泡。

#cancelable(布尔值)：表示事件是否可以取消。

#detail(对象):任意值，保存在event对象的tetail属性中。

使用前需要判断下：document.implementation.hasFeature("CustomEvents","3.0")。

6.2、IE中的事件模拟

JavaScript事件解析相关推荐

javascript 事件知识集锦
1.事件委托极其应用转载的链接: http://www.webhek.com/event-delegate/#comments 2. 解析javascript事件机制转载链接: http: ...
JAVA script 循环图片_深入分析JavaScript 事件循环(Event Loop)
事件循环(Event Loop),是每个JS开发者都会接触到的概念,但是刚接触时可能会存在各种疑惑. 众所周知,JS是单线程的,即同一时间只能运行一个任务.一般情况下这不会引发问题,但是如果我们有一个 ...
读《Javascript高级程序设计》中的javascript事件处理程序（事件侦听器）心得
今天读了<Javascript高级程序设计>中的javascript事件处理程序(事件侦听器)部分的内容,总结一些自己的心得: 事件就是用户或者浏览器自身执行的某种动作.例如click . ...
JavaScript—事件
JavaScript-事件事件机制: 在用户使用键盘.鼠标等设备进行操作时,实际上每一次的操作都是在发起一个事件. 当我们的鼠标点击到窗口上的按钮时,并不是鼠标的箭头真正点击到这个按钮了,而是鼠标发 ...
JavaScript 预解析机制
JavaScript预解析文章目录 JavaScript预解析 JS预解析? 一.预解析受体二.对var的预解析三.对function的预解析四.var在作用域内五.function作参.在 ...
javascript 事件机制，同步异步
转载自:https://juejin.im/post/59e85eebf265da430d571f89,为了记录方便学习. 这一次,彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底 ...
javascript事件列表解说
javascript事件列表解说事件浏览器支持解说一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
javascript --- 事件托付
javascript 之事件托付长处:1.提高性能(仅仅须要对父级进行操作,子节点相同会拥有其相关属性和方法) 2.对于新加入的事件.也让其拥有父级事件的属性 <!doctype html& ...
【探讨】javascript事件机制底层实现原理
前言又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...

JavaScript事件解析

JavaScript事件解析相关推荐

最新文章

热门文章