1.添加监听事件（addEventListener() 方法）

addEventListener() 方法用于向指定元素添加事件句柄。addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄，也可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件，也可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。

其语法如下：👇👇👇

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown")。（注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。）

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

1.1 向原元素添加监听事件 

 
该实例使用 addEventListener() 方法在用户点击按钮时执行函数。
点我
 

1.2 向同一个元素中添加多个相同类型的监听事件

 
该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。
点我
 

1.3 向同一个元素中添加多个不同类型的监听事件

 
该实例使用 addEventListener() 方法在同一个按钮中添加多个不同类型的事件。
点我

 

1.4 向Window对象添加监听事件

 
该实例在 window 对象中使用 addEventListener() 方法。
尝试重置浏览器的窗口触发 "resize" 事件句柄。

 

1.5 带有参数的监听事件

当传递参数值时，使用"匿名函数"调用带参数的函数。 

 
该实例演示了在使用 addEventListener() 方法时如何传递参数。
点击按钮执行计算。
点我

 

1.6 监听事件中的事件冒泡和事件捕获

事件传递有两种方式：冒泡与捕获。事件传递定义了元素事件触发的顺序。 如果你将

元素插入到

元素中，用户点击

元素, 哪个元素的 "click" 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发

元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：

元素的点击事件先触发 ，然后再触发

元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递。当值为 true 时, 事件使用捕获传递。

 
该实例演示了在添加不同事件监听时，冒泡与捕获的不同。
点击段落，我是冒泡。

点击段落，我是捕获。
 

2.移除监听事件（removeEventListener() 方法）

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄。 

 
 div 元素添加了 onmousemove 事件句柄，鼠标在框内移动时会显示随机数。
点击按钮移除 DIV 的事件句柄。
点我