如何使用事件监听绑定事件

使用事件监听绑定事件

在前端开发过程中我们经常会遇到给页面元素添加事件的问题，使用给事件属性赋值的方法,是一种为事件绑定的方法，但是这种方法的局限性就是只能为事件绑定一个方法，如果绑定多个就会最后一个方法为准，为了实现一个事件拥有多个方法，我们来了解学习一下如何使用事件监听绑定事件。

一般情况下，我们获取元素后给事件添加方法

然而有些时候我们需要给事件添加多个绑定方法，例如按钮、滚轮等事件经常都不是单一的方法，作为初学者，第一时间我的想法就是再次给事件绑定一个方法，可结果只有一个方法被使用，如图（只执行了第二个方法）

那我们应该如何实现多个事件的绑定呢？这时候就要运用到事件监听器了（举例说明）

添加监听： addEventListener

事件监听函数有三个参数：事件 事件触发时执行的函数 是否使用捕获

element.addEventListener(event, function, useCapture)

event : （必需）事件名，支持所有 DOM事件 。

function：（必需）指定要事件触发时执行的函数。

useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。 false，冒泡。默认false，不写默认false。

移除监听：removeEventListener（参数必须和添加时一致才可以移除）

element.removeEventListener(event, function, useCapture)

注意： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和
removeEventListener() 方法。

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

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

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

注：以上内容摘要授课老师的知识讲解，以及自我学习的初步理解，希望能够给与阅读者一定帮助