事件

在前端开发中，我们不可避免的会与各种事件打交道，对于javascript中的事件，我们有几个部分是一定需要了解清楚的。

• 事件绑定的方式有哪些
• 事件模型
• 事件委托
• 事件对象

事件绑定的方式

我们这里以点击事件为例

• 第一种：

• 第二种：DOM.onclick = function () {}

• 第三种：DOM.addEventListener('click' , function () {} , false/true)

三种绑定方式的区别：

• 第一种方式是直接内嵌在html代码中，将js和html耦合在一起，这种方式是不推荐的。
• 第二种方式是无法同时触发多个事件回调函数，当同时赋值多个事件回调函数时，后一个都会覆盖前一个事件回调函数，所以当事件触发时，最终执行的就是最后一个事件回调函数，前面的都不会执行
• 第三种方式可以触发多个事件回调函数，第三种方式其实就是将多个事件回调函数一个一个的添加到任务队列中，等到事件被触发的时候，就依次以添加时的顺序一个一个的执行，直到所有的回调函数都执行完

事件模型

事件，我们可以把它分为三个阶段：捕获阶段，目标阶段，冒泡阶段。

捕获阶段：指的就是从最外层容器向目标对象一层一层的传递，也就是从外向内传递。

目标阶段：指的就是从目标事件对象的父节点到目标事件对象这一阶段。

从目标事件对象开始从下往上传递一直到根元素为止，这一阶段被称为事件冒泡阶段。

事件对象的几个常用的属性和方法

• e.target：事件目标对象
• e.preventDefault()：阻止事件默认行为（比如a标签的默认行为就是跳转到指定的链接上）
• e.stopPropagation()：阻止事件冒泡

target，currentTarget，this的区别

• event.target表示的是事件目标节点，你点击哪个元素，target表示的就是哪个元素，可以说这个表示的是事件的真正触发者。
• event.currentTarget表示的是事件的监听者。
• this表示的是当前事件对象。

事件委托

事件委托就是利用事件冒泡机制，指定一个事件处理程序，来管理某一类型的所有事件。

为什么要用事件委托？

• 使用事件委托，我们就能够避免给每一个DOM元素绑定同一类型的事件回调函数，可以减少内存的占用。
• 使用事件委托，还可以不用给新插入进来的DOM元素绑定事件回调函数。