JavaScript面试题-绑定事件的方式？如何删除事件？

古城微笑少年丶 2023-05-30 06:16 6阅读 0赞

#### 事件绑定 ####

通过 `.on` 的方式绑定事件，一种事件只能绑定一次，绑定多个相同事件，后面的事件会覆盖前面的事件。

通过 `addeventListener()` 的方式绑定事件，该方式可以给一个元素绑定多个相同事件，该方法 IE8 不支持。

*  `target.addEventListener(type, listener[, options]);` target 目标对象；type 表示监听事件类型的字符串； listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数；options 布尔类型（可选），为 true 时执行捕获阶段，为 false 时执行冒泡阶段。
 *  同一个元素绑定的相同事件既设置了捕获阶段又设置了冒泡阶段，会先执行捕获再执行冒泡。

通过 `attachEvent()` 的方式绑定事件，同样可以绑定多个事件，该方法是属于 IE 的方法。

*  `target.attachEvent(type,listener);` type 事件类型字符串，（需要加 on 如 onclick,onkeyup），listener 事件处理函数。

#### 删除事件 ####

传统方式：

*  `eventTarget.onclick = null`

方法监听注册方式：

*  `eventTarget.removeEventListener(type, listener[, useCapture])`
    
     *  type 需要移除的事件类型
     *  listener 需要从目标事件移除的 [`EventListener`][EventListener] 函数
     *  指定需要移除的 [`EventListener`][EventListener] 函数是否为捕获监听器。如果无此参数，默认值为 `false`。
 *  `target.detachEvent(eventNameWithOn, callback)` IE 的方法
    
     *  target
        
        将要移除事件的DOM节点
     *  eventNameWithOn
        
        将要移除的事件名，以“on”为前缀（例如它是一个事件处理程序）。 例如，您可以使用“onclick”移除点击事件的事件处理程序。
     *  callback
     *  注销事件后的回调函数

[EventListener]: https://developer.mozilla.org/zh-CN/docs/Web/API/EventListener