JS--Event

你的名字 2022-08-31 11:23 119阅读 0赞

原文网址：[JS--Event\_IT利刃出鞘的博客-CSDN博客][JS--Event_IT_-CSDN]

# 其他网址 #

[事件介绍 - 学习 Web 开发 | MDN][- _ Web _ _ MDN]

[JS一个元素怎么绑定多个事件\_BarryLee的博客-CSDN博客\_绑定多个事件][JS_BarryLee_-CSDN]  
[JavaScript(1)---绑定事件、解除绑定事件 - 雨点的名字 - 博客园][JavaScript_1_---_ - _ -]

# 绑定方式 #

## html标签 ##

**简介**

> **优点**
> 
> 1.  同一个 dom 元素上，on 可以绑定多个同类型事件，会按顺序执行。
> 
> **缺点**
> 
> 1.  HTML与js代码紧密耦合。如果要更换事件，就要改动两个地方:HTML代码和JS代码，这就不利于后期代码的维护。

**实例**

>     <!doctype html>
>     <html lang="en">
>     
>     <head>
>         <meta charset="UTF-8">
>         <title>This is title</title>
>     </head>
>     
>     <body>
>     
>     <div>
>         <button id="btn" onclick="function1();function2()">点我</button>
>     </div>
>     
>     <script>
>         function function1() {
>             console.log('函数1');
>         }
>     
>         function function2() {
>             console.log('函数2');
>         }
>     
>     </script>
>     
>     </body>
>     </html>
> 
> 结果：（两个函数按顺序执行）
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]

## on ##

**简介**

> **优点**
> 
> 1.  兼容性很好，所有浏览器都支持。
> 
> **缺点**
> 
> 1.  同一个 dom 元素上，on 只能绑定一个同类型事件，后者会覆盖前者（不同类型的事件可以绑定多个）

**实例**

>     <!doctype html>
>     <html lang="en">
>     
>     <head>
>         <meta charset="UTF-8">
>         <title>This is title</title>
>     </head>
>     
>     <body>
>     
>     <div>
>         <button id="btn">点我</button>
>     </div>
>     
>     <script>
>         let btn = document.getElementById('btn');
>         btn.onclick = function () {
>             console.log('函数1');
>         };
>         btn.onclick = function () {
>             console.log('函数2');
>         };
>     </script>
>     
>     </body>
>     </html>
> 
> 结果（只运行了最后一个函数）
> 
> ![20210725111923814.png][]

## addEventListener或attachEvent ##

**简介**

> **优点**
> 
> 1.  支持 绑定多个同类型事件
> 
> **缺点**
> 
> 1.  兼容性不好（此项为鸡蛋里挑骨头。一般使用addEventListener即可，放弃IE8）

**addEventListener与attachEvent区别**

> <table style="width:500px;"> 
>  <tbody> 
>   <tr> 
>    <td><strong>项</strong></td> 
>    <td><strong>addEventListener</strong></td> 
>    <td><strong>attachEvent</strong></td> 
>   </tr> 
>   <tr> 
>    <td><strong>兼容性</strong></td> 
>    <td> <p>支持：谷歌、火狐、IE11</p> <p>不支持：IE8</p> </td> 
>    <td> <p>不支持：谷歌、火狐、IE11</p> <p>支持：IE8</p> </td> 
>   </tr> 
>   <tr> 
>    <td><strong>顺序</strong></td> 
>    <td>按事件绑定的先后顺序执行</td> 
>    <td>随机</td> 
>   </tr> 
>   <tr> 
>    <td><strong>this指向</strong></td> 
>    <td>this是当前绑定事件的对象</td> 
>    <td>this是window</td> 
>   </tr> 
>   <tr> 
>    <td><strong>参数个数</strong></td> 
>    <td>三个参数</td> 
>    <td>两个参数</td> 
>   </tr> 
>   <tr> 
>    <td><strong>事件命名</strong></td> 
>    <td>没有on</td> 
>    <td>有on</td> 
>   </tr> 
>  </tbody> 
> </table>

**实例**

>     <!doctype html>
>     <html lang="en">
>     
>     <head>
>         <meta charset="UTF-8">
>         <title>This is title</title>
>     </head>
>     
>     <body>
>     
>     <div>
>         <button id="btn">点我</button>
>     </div>
>     
>     <script>
>         let btn = document.getElementById('btn');
>         btn.addEventListener("click", () => {
>             console.log('函数1');
>         })
>         btn.addEventListener("click", () => {
>             console.log('函数2');
>         })
>     
>     </script>
>     
>     </body>
>     </html>
> 
> 结果：（两个函数按顺序执行）
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1][]

**参数说明**

> element.addEventListener(event, handler\[, options\]);
> 
> 第一个参数：事件名称。比如：click，mouseover
> 
> 第二个参数：作为事件处理程序的函数
> 
> 第三个参数：options
> 
>  *  具有以下属性的附加可选对象：
>     
>      *  once ：如果为 true ，那么会在被触发后自动删除监听器。
>      *  capture ：事件处理的阶段，我们稍后将在 冒泡和捕获 一章中介绍。由于历史原  
>         因， options 也可以是 false/true ，它与 \{capture: false/true\} 相同。
>      *  passive ：如果为 true ，那么处理程序将不会调用 preventDefault()

# 事件大全 #

**其他网址**

> [事件参考 | MDN][_ MDN]

[JS--Event_IT_-CSDN]: https://knife.blog.csdn.net/article/details/119078838
[- _ Web _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events
[JS_BarryLee_-CSDN]: https://blog.csdn.net/qq_38238041/article/details/86797019
[JavaScript_1_---_ - _ -]: https://www.cnblogs.com/qdhxhz/p/11999941.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: /images/20220829/985513f006e3408383ad1d4c44b837aa.png
[20210725111923814.png]: /images/20220829/f9719b12c715447086ff52abf543bb10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1]: /images/20220829/abaff75044434ab0866571fde609ae46.png
[_ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/Events

JS--Event

发表评论取消回复

还没有评论，来说两句吧...

相关阅读