WebAPI-注册事件的两种方式，删除事件的方式详解

拼搏现实的明天。 2023-06-14 05:30 15阅读 0赞

# 注册事件 #

#### 传统注册方式 ####

通过 `on` 开头进行注册事件的方式

###### 特点 ######

通过这种方式注册的事件具有唯一性，同一个元素注册多个相同的事件最后注册的事件会覆盖之前注册的事件（后者覆盖前者）

示例：

<input type="button" id="btn" value="按钮">
    
    <script> function $(id){ return document.getElementById(id); } //该方法添加相同的点击事件，后者会覆盖前者 $('btn').onclick = function(){ console.log('绑定了点击事件'); }; // 覆盖了前面的点击事件 $('btn').onclick = function(){ console.log('又绑定了一个点击事件'); }; </script>

![在这里插入图片描述][20191119154205148.gif]

#### 方法监听注册方式 ####

通过 `addEventListener()` 方法注册事件；这是 w3c 标准注册方法，不过 IE9 以上才支持该方法 IE9 以下可以使用 `attachEvent()` 方法代替

###### addEventListener() 语法： ######

element.addEventListener(event, function, useCapture)

*  `element` 注册事件的元素
 *  `event` 事件名称（不需要 on 前缀），值为字符串
 *  `function` 事件处理函数，事件触发时就会调用该函数
 *  `useCapture` 用于指定事件在哪个阶段执行，是个可选参数，参数为布尔值；为 true 时在捕获阶段执行，为 false 时在冒泡阶段执行，默认为 false

特点：

同一个元素可以注册多个相同的事件（监听器），会按照注册的顺序依次执行

示例：

<input type="button" id="btn" value="按钮">
    
    <script> function my$(id){ return document.getElementById(id); } my$('btn').addEventListener('click',function(){ console.log('绑定了点击事件！'); }); //该方法可添加相同的点击事件 my$('btn').addEventListener('click',function(){ console.log('又绑定了一个点击事件'); }); </script>

![在这里插入图片描述][20191119153832785.gif]

###### attachEvent() 语法： ######

target.attachEvent(type,listener)

*  `target` 注册事件的目标元素
 *  `type` 事件类型字符串（需要加 on 如 onclick,onkeyup）
 *  `listener` 事件处理函数

该方法也支持同时注册多个相同的事件，IE9 以下的版本才支持该方法；属于非标准的方法。

示例：

<input type="button" id="btn" value="按钮">
    
    <script> function $(id){ return document.getElementById(id); } //该方法只有 IE8 以下支持 $('btn').attachEvent('onclick',function(){ console.log('通过 attachEvent 绑定了一个点击事件'); }); $('btn').attachEvent('onclick',function(){ console.log('又通过 attachEvent 绑定了一个点击事件'); }); </script>

![在这里插入图片描述][20191119153035456.gif]

# 解绑事件 #

#### 传统事件的解绑 ####

通过传统方式注册的事件解绑事件时只需要将事件处理函数置为 `null` 即可

示例：

<input type="button" value="按钮" id="btn">
    <input type="button" value="解绑事件" id="btn2">
    <script> function my$(id){ return document.getElementById(id); } my$('btn').onclick = function(){ // 当 backgroundColor 存在时就 if(this.style.backgroundColor){ // 移除 style 属性 this.removeAttribute('style'); }else{ // 不存在时就设置 this.style.backgroundColor = 'skyblue'; } } my$('btn2').onclick = function(){ // 解绑事件 my$('btn').onclick = null; console.log('解绑了点击事件') } </script>

![在这里插入图片描述][20191119090319172.gif]

#### 方法监听注册方式的解绑 ####

使用**方法监听注册方式**注册的事件在使用对应**删除事件的方法**进行解绑时首先要约定注册的事件处理函数必须是**命名函数**否则无法进行解绑

##### 解绑通过 addEventListener() 方法注册的事件 #####

使用对应的 `removeEventListener()` 方法解绑事件

语法：

element.removeEventListener(event, functionName, useCapture)

*  `element` 绑定了事件的元素
 *  `event` 事件名称，字符串类型，不带前缀 on
 *  `functionName` 事件处理函数的函数名
 *  `useCapture` 用于设置移除事件的阶段，是个布尔值；值为 true 时在捕获阶段移除事件，值为 false 时在冒泡阶段移除事件，默认为 false

示例：

<input type="button" value="按钮" id="btn">
    <input type="button" value="解绑事件" id="btn2">
    <script> function my$(id){ return document.getElementById(id); } // 注册事件 my$('btn').addEventListener('click', fun, false) // 事件处理函数 function fun(){ if(this.style.backgroundColor){ this.removeAttribute('style'); }else{ this.style.backgroundColor = 'red'; this.style.color = 'white'; } }; // 解绑事件 my$('btn2').onclick = function(){ my$('btn').removeEventListener("click",fun,false); }; </script>

![在这里插入图片描述][20191119133342624.gif]

##### 解绑通过 attachEvent() 方法注册的事件 #####

通过 attachEvent() 方法绑定的事件需要使用对应的 `detachEvent()` 方法来解绑事件

语法：

target.removeEventListener(event, functionName)

*  `target` 将要移除事件的目标元素
 *  `event` 事件名称，是字符串，需要前缀 on
 *  `functionName` 事件处理函数的函数名

示例：

<input type="button" value="按钮" id="btn">
    <input type="button" value="解绑事件" id="btn2">
    <script> function my$(id){ return document.getElementById(id); } // 注册事件 my$('btn').attachEvent('onclick', fun) // 事件处理函数 function fun(){ if(my$('btn').style['background-color']){ my$('btn').removeAttribute('style'); }else{ my$('btn').style['background-color'] = 'red'; my$('btn').style.color = 'white'; } }; // 解绑事件 my$('btn2').onclick = function(){ my$('btn').detachEvent("onclick",fun); console.log('解绑了 click 事件') }; </script>

![在这里插入图片描述][20191119152303284.gif]

[20191119154205148.gif]: https://img-blog.csdnimg.cn/20191119154205148.gif
[20191119153832785.gif]: https://img-blog.csdnimg.cn/20191119153832785.gif
[20191119153035456.gif]: https://img-blog.csdnimg.cn/20191119153035456.gif
[20191119090319172.gif]: https://img-blog.csdnimg.cn/20191119090319172.gif
[20191119133342624.gif]: https://img-blog.csdnimg.cn/20191119133342624.gif
[20191119152303284.gif]: https://img-blog.csdnimg.cn/20191119152303284.gif