JavaScript事件、事件流、事件监听器、event、事件委托

事件

JavaScript 与 HTML 之间的交互是通过事件实现的。事件是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用事件监听器来预定事件，以便事件发生时执行相应的代码。

事件流

事件流 是从页面中接收事件的顺序。DOM事件流规范规定事件流分为 3 个阶段：

1. 事件捕获阶段：事件从上往下查找对应元素，直到捕获到事件。
2. 到达目标阶段：到达目标元素后执行事件对应的处理函数。
3. 事件冒泡阶段：事件从目标元素开始冒泡

注意：在 DOM 事件流中，实际的目标（元素）在捕获阶段不会收到事件。这是因为捕获阶段从document到再到就结束了。下一阶段，即会在元素上触发事件的"到达目标"阶段，通常在事件处理时被认为是冒泡阶段的一部分。然后冒泡阶段开始，事件反向传播至文档。

事件监听器

事件处理程序（或事件监听器）就是响应事件而调用的函数。

DOM0事件监听器：

使用on开头的事件，同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。

//添加 

<button onclick="changeNumber" />
或 btn.onclick = function(){}

//删除 

btn.onclick = null

DOM1事件监听器：

使用addEventListener() 和 removeEventListener()

大多数情况下，事件处理程序会被添加到事件流的冒泡阶段，主要原因是跨浏览器兼容性好。把事件处理程序注册到捕获阶段通常用于在事件到达其指定目标之前拦截事件。如果不需要拦截，则不要使用事件捕获。

常见的事件：

注意：onkeypress区分大小写，并且不识别功能键，比如左右箭头、shift、ctrl等。

事件对象event

DOM发生事件时会将相关信息收集并存储在event对象中。该对象会包含一些事件的元素、类型等基本信息。在浏览器中，event对象是传给事件监听器的唯一参数。在添加事件监听器时可以使用事件对象。

属性：

• event.currentTarget是当前事件处理程序所在的元素；event.target是事件目标
• event.target 和 this的区别：

1. this是事件绑定的元素，这个函数的调用者(绑定这个事件的元素)
2. event.target是事件触发的元素，即点的是哪个元素。在表单中常常使用 event.target.value 来获取绑定事件的表单项。在JS中常常使用 event.target.style.xxx 来动态为HTML元素绑定CSS样式。

方法：

stopImmediatePropagation()                阻止当前节点的同一事件的其它事件处理程序。

事件委托：

不在每个子节点单独设置事件监听器，设置在其父节点上，然后利用冒泡原理影响每一个子节点。要使用事件委托，需要保证事件能够发生冒泡。使用事件委托可以大量节省内存，提高页面的性能，减少重复工作。