【浏览器】JS Event 事件机制

[swiftwind0405]

javaScript 与 HTML 之间的交互是通过事件实现的。

事件捕获和事件冒泡

定义：
事件冒泡和事件捕获，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。

先看一张W3的图：

绿色的流程就是事件冒泡的过程：事件会从最内层的元素开始发生，一直向上传播，直到document对象。
红色的流程就是事件捕获的过程：事件从最外层开始发生，直到最具体的元素。

1-5是捕获过程，5-6是目标阶段，6-10是冒泡阶段。

事件代理

可以查看这个 demo，理解下为什么需要使用事件代理

使用事件代理的好处不仅在于将多个事件处理函数减为一个，而且对于不同的元素可以有不同的处理方法。

主流浏览器默认为事件冒泡

对于事件代理来说，在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分。目前主流浏览器都是默认为事件冒泡，因此除非特殊需求，也尽量以事件冒泡来处理。

阻止事件冒泡

event.stopPropagation()

终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。
该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

event.target==event.currentTarget

让触发事件的元素等于绑定事件的元素，也可以阻止事件冒泡

阻止默认事件

event.preventDefault()

取消事件的默认动作。
该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。

事件处理程序

vHTML事件处理程序

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的 HTML 特性来指定。

例如，要在按钮被单击时执行一些 JavaScript，可以像下面 这样编写代码：

<input type="button" value="Click Me" onclick="alert(&quot;Clicked&quot;)" />

缺点：

• 存在一个时差问题。因为用户可能会在 HTML 元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。
• 这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。
• HTML 与 JavaScript 代码紧密耦合。如果要更换事 件处理程序，就要改动两个地方：HTML 代码和 JavaScript 代码。

DOM0 级事件处理程序

简单来说就是取得一 个要操作的对象的引用，然后为它指定了某事件处理程序（如onclick）。使用 DOM0 级方法指定的事件处理程序被认为是元素的方法，以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

var btn = document.getElementById("myBtn"); 
btn.onclick = function(){ 
    alert(this.id); //"myBtn" 
};

btn.onclick = null;//删除事件处理程序

将事件处理程序设置为 null 之后，再单击按钮将不会有任何动作发生。

DOM2 级事件处理程序

“DOM2 级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener() 和 removeEventListener()。

onclick 事件会被覆盖，addevenlistener 事件先后执行。

同时支持了事件捕获阶段和事件冒泡阶段，因此我们可以自己控制事件处理函数在哪一个阶段被使用。

addEventListener 方法用来为一个特定的元素绑定一个事件处理函数。
addEventListener 有三个参数：

 element.addEventListener(event, function, useCapture)

参数	描述
event	必须。字符串，指定事件名。 注意: 不要使用 on 前缀。 例如，使用 click，而不是使用 onclick。 提示： 所有 HTML DOM 事件，可以查看HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， click 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 true：事件句柄在捕获阶段执行（即在事件捕获阶段调用处理函数） false (默认)：事件句柄在冒泡阶段执行（即表示在事件冒泡的阶段调用事件处理函数）

事件类型

Web 浏览器中可能发生的事件有很多类型。如前所述，不同的事件类型具有不同的信息，而“DOM3 级事件”规定了以下几类事件。

• UI（User Interface，用户界面）事件，当用户与页面上的元素交互时触发； 如resize，scroll
• 焦点事件，当元素获得或失去焦点时触发； 如blur （在元素失去焦点时触发，这个事件不会冒泡）
• 鼠标事件，当用户通过鼠标在页面上执行操作时触发；如click
• 滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
• 文本事件，当在文档中输入文本时触发；
• 键盘事件，当用户通过键盘在页面上执行操作时触发；
• 合成事件，当为 IME（Input Method Editor，输入法编辑器）输入字符时触发；
• 变动（mutation）事件，当底层 DOM 结构发生变化时触发。

其它知识

• 不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。
• 阻止冒泡并不能阻止对象默认行为。比如submit按钮被点击后会提交表单数据，这种行为无须我们写程序定制。
• event.target 和 event.currentTarget 的区别：currentTarget 表示的，标识是当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素，而 event.target 则是事件触发的元素。

参考资料

• 你真的理解 事件冒泡 和 事件捕获 吗？
• js事件详解

[swiftwind0405]

事件委托应用场景，e.target和e.currentTarget区别