JS 事件绑定、事件监听、事件委托详细介绍

墨蓝 2022-05-19 05:40 300阅读 0赞

在JavaScript的学习中，我们经常会遇到JavaScript的事件机制，例如，事件绑定、事件监听、事件委托（事件代理）等。这些名词是什么意思呢，有什么作用呢？

**事件绑定**

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。

在JavaScript中，有三种常用的绑定事件的方法：

1.  在DOM元素中直接绑定；
2.  在JavaScript代码中绑定；
3.  绑定事件监听函数。

**在DOM中直接绑定事件**

我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。好多不一一列出了。如果想知道更多事件类型请查看， DOM事件 。

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>&lt;input type=</code><code>"button"</code> <code>value=</code><code>"click me"</code> <code>onclick=</code><code>"hello()"</code><code>&gt;</code> &nbsp; <code>&lt;script&gt;</code> <code>function</code> <code>hello(){ </code> <code>&nbsp;</code><code>alert(</code><code>"hello world!"</code><code>);</code> <code>}</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

在JavaScript代码中绑定事件

在JavaScript代码中（即 script 标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>&lt;input type=</code><code>"button"</code> <code>value=</code><code>"click me"</code> <code>id=</code><code>"btn"</code><code>&gt;</code> &nbsp; <code>&lt;script&gt;</code> <code>document.getElementById(</code><code>"btn"</code><code>).onclick = </code><code>function</code><code>(){ </code> <code>&nbsp;</code><code>alert(</code><code>"hello world!"</code><code>);</code> <code>}</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**使用事件监听绑定事件**

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。下面详细介绍，事件监听。

**事件监听**

关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。

起初Netscape制定了JavaScript的一套事件驱动机制（即事件捕获）。随即IE也推出了自己的一套事件驱动机制（即事件冒泡）。最后W3C规范了两种事件机制，分为捕获阶段、目标阶段、冒泡阶段。IE8以前IE一直坚持自己的事件机制（前端人员一直头痛的兼容性问题），IE9以后IE也支持了W3C规范。

W3C规范

语法：

element.addEventListener(event, function, useCapture)

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

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

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

注：IE8以下不支持。

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>&lt;input type=</code><code>"button"</code> <code>value=</code><code>"click me"</code> <code>id=</code><code>"btn1"</code><code>&gt;</code> &nbsp; <code>&lt;script&gt;</code> <code>document.getElementById(</code><code>"btn1"</code><code>).addEventListener(</code><code>"click"</code><code>,hello);</code> <code>function</code> <code>hello(){ </code> <code>&nbsp;</code><code>alert(</code><code>"hello world!"</code><code>);</code> <code>}</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**IE标准**

语法：

element.attachEvent(event, function)

event：（必需）事件类型。需加“on“，例如：onclick。

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

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>&lt;input type=</code><code>"button"</code> <code>value=</code><code>"click me"</code> <code>id=</code><code>"btn2"</code><code>&gt;</code> &nbsp; <code>&lt;script&gt;</code> <code>document.getElementById(</code><code>"btn2"</code><code>).attachEvent(</code><code>"onclick"</code><code>,hello);</code> <code>function</code> <code>hello(){ </code> <code>&nbsp;</code><code>alert(</code><code>"hello world!"</code><code>);</code> <code>}</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**事件监听的优点**

1、可以绑定多个事件。

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>&lt;input type=</code><code>"button"</code> <code>value=</code><code>"click me"</code> <code>id=</code><code>"btn3"</code><code>&gt;</code> &nbsp; <code>&lt;script&gt;</code> <code>var</code> <code>btn3 = document.getElementById(</code><code>"btn3"</code><code>);</code> <code>btn3.onclick = </code><code>function</code><code>(){ </code> <code>&nbsp;</code><code>alert(</code><code>"hello 1"</code><code>); </code><code>//不执行</code> <code>}</code> <code>btn3.onclick = </code><code>function</code><code>(){ </code> <code>&nbsp;</code><code>alert(</code><code>"hello 2"</code><code>); </code><code>//执行</code> <code>}</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

常规的事件绑定只执行最后绑定的事件。

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>&lt;input type=</code><code>"button"</code> <code>value=</code><code>"click me"</code> <code>id=</code><code>"btn4"</code><code>&gt;</code> &nbsp; <code>&lt;script&gt;</code> <code>var</code> <code>btn4 = document.getElementById(</code><code>"btn4"</code><code>);</code> <code>btn4.addEventListener(</code><code>"click"</code><code>,hello1);</code> <code>btn4.addEventListener(</code><code>"click"</code><code>,hello2);</code> &nbsp; <code>function</code> <code>hello1(){ </code> <code>&nbsp;</code><code>alert(</code><code>"hello 1"</code><code>);</code> <code>}</code> <code>function</code> <code>hello2(){ </code> <code>&nbsp;</code><code>alert(</code><code>"hello 2"</code><code>);</code> <code>}</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

两个事件都执行了。

2、可以解除相应的绑定

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td> <code>&lt;input type=</code><code>"button"</code> <code>value=</code><code>"click me"</code> <code>id=</code><code>"btn5"</code><code>&gt;</code> &nbsp; <code>&lt;script&gt;</code> <code>var</code> <code>btn5 = document.getElementById(</code><code>"btn5"</code><code>);</code> <code>btn5.addEventListener(</code><code>"click"</code><code>,hello1);</code><code>//执行了</code> <code>btn5.addEventListener(</code><code>"click"</code><code>,hello2);</code><code>//不执行</code> <code>btn5.removeEventListener(</code><code>"click"</code><code>,hello2);</code> &nbsp; <code>function</code> <code>hello1(){ </code> <code>&nbsp;</code><code>alert(</code><code>"hello 1"</code><code>);</code> <code>}</code> <code>function</code> <code>hello2(){ </code> <code>&nbsp;</code><code>alert(</code><code>"hello 2"</code><code>);</code> <code>}</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**封装事件监听**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 </td> 
 <td> <code>&lt;input type=</code><code>"button"</code> <code>value=</code><code>"click me"</code> <code>id=</code><code>"btn5"</code><code>&gt;</code> &nbsp; <code>//绑定监听事件</code> <code>function</code> <code>addEventHandler(target,type,fn){ </code> <code>&nbsp;</code><code>if</code><code>(target.addEventListener){ </code> <code>&nbsp;</code><code>target.addEventListener(type,fn);</code> <code>&nbsp;</code><code>}</code><code>else</code><code>{ </code> <code>&nbsp;</code><code>target.attachEvent(</code><code>"on"</code><code>+type,fn);</code> <code>&nbsp;</code><code>}</code> <code>}</code> &nbsp; <code>//移除监听事件</code> <code>function</code> <code>removeEventHandler(target,type,fn){ </code> <code>&nbsp;</code><code>if</code><code>(target.removeEventListener){ </code> <code>&nbsp;</code><code>target.removeEventListener(type,fn);</code> <code>&nbsp;</code><code>}</code><code>else</code><code>{ </code> <code>&nbsp;</code><code>target.detachEvent(</code><code>"on"</code><code>+type,fn);</code> <code>&nbsp;</code><code>}</code> <code>}</code> &nbsp; <code>//测试</code> <code>var</code> <code>btn5 = document.getElementById(</code><code>"btn5"</code><code>);</code> <code>addEventHandler(btn5,</code><code>"click"</code><code>,hello1);</code><code>//添加事件hello1</code> <code>addEventHandler(btn5,</code><code>"click"</code><code>,hello2);</code><code>//添加事件hello2</code> <code>removeEventHandler(btn5,</code><code>"click"</code><code>,hello1);</code><code>//移除事件hello1</code> </td> 
 </tr> 
 </tbody> 
</table>

**事件委托**

事件委托，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>&lt;input type=</code><code>"button"</code> <code>value=</code><code>"click me"</code> <code>id=</code><code>"btn6"</code><code>&gt;</code> &nbsp; <code>var</code> <code>btn6 = document.getElementById(</code><code>"btn6"</code><code>);</code> <code>document.onclick = </code><code>function</code><code>(event){ </code> <code>&nbsp;</code><code>event = event || window.event;</code> <code>&nbsp;</code><code>var</code> <code>target = event.target || event.srcElement;</code> <code>&nbsp;</code><code>if</code><code>(target == btn6){ </code> <code>&nbsp;</code><code>alert(btn5.value);</code> <code>&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

上面只是个例子，代码尽可能的简化了。在实际的代码中 我们可能用到jQuery的live()、delegate()、bind()、on()等。

**事件委托优点**

1、提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用。 实例分析JavaScript中的事件委托和事件绑定 ，这篇文章写得还不错。

**传统写法**

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 </td> 
 <td> <code>&lt;ul id=</code><code>"list"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;li id=</code><code>"item1"</code> <code>&gt;item1&lt;/li&gt;</code> <code>&nbsp;</code><code>&lt;li id=</code><code>"item2"</code> <code>&gt;item2&lt;/li&gt;</code> <code>&nbsp;</code><code>&lt;li id=</code><code>"item3"</code> <code>&gt;item3&lt;/li&gt;</code> <code>&lt;/ul&gt;</code> &nbsp; <code>&lt;script&gt;</code> <code>var</code> <code>item1 = document.getElementById(</code><code>"item1"</code><code>);</code> <code>var</code> <code>item2 = document.getElementById(</code><code>"item2"</code><code>);</code> <code>var</code> <code>item3 = document.getElementById(</code><code>"item3"</code><code>);</code> &nbsp; <code>item1.onclick = </code><code>function</code><code>(){ </code> <code>&nbsp;</code><code>alert(</code><code>"hello item1"</code><code>);</code> <code>}</code> <code>item2.onclick = </code><code>function</code><code>(){ </code> <code>&nbsp;</code><code>alert(</code><code>"hello item2"</code><code>);</code> <code>}</code> <code>item3.onclick = </code><code>function</code><code>(){ </code> <code>&nbsp;</code><code>alert(</code><code>"hello item3"</code><code>);</code> <code>}</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**事件委托**

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 </td> 
 <td> <code>&lt;ul id=</code><code>"list"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;li id=</code><code>"item1"</code> <code>&gt;item1&lt;/li&gt;</code> <code>&nbsp;</code><code>&lt;li id=</code><code>"item2"</code> <code>&gt;item2&lt;/li&gt;</code> <code>&nbsp;</code><code>&lt;li id=</code><code>"item3"</code> <code>&gt;item3&lt;/li&gt;</code> <code>&lt;/ul&gt;</code> &nbsp; <code>&lt;script&gt;</code> <code>var</code> <code>item1 = document.getElementById(</code><code>"item1"</code><code>);</code> <code>var</code> <code>item2 = document.getElementById(</code><code>"item2"</code><code>);</code> <code>var</code> <code>item3 = document.getElementById(</code><code>"item3"</code><code>);</code> &nbsp; <code>document.addEventListener(</code><code>"click"</code><code>,</code><code>function</code><code>(event){ </code> <code>&nbsp;</code><code>var</code> <code>target = event.target;</code> <code>&nbsp;</code><code>if</code><code>(target == item1){ </code> <code>&nbsp;</code><code>alert(</code><code>"hello item1"</code><code>);</code> <code>&nbsp;</code><code>}</code><code>else</code> <code>if</code><code>(target == item2){ </code> <code>&nbsp;</code><code>alert(</code><code>"hello item2"</code><code>);</code> <code>&nbsp;</code><code>}</code><code>else</code> <code>if</code><code>(target == item3){ </code> <code>&nbsp;</code><code>alert(</code><code>"hello item3"</code><code>);</code> <code>&nbsp;</code><code>}</code> <code>})</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

2、动态的添加DOM元素，不需要因为元素的改动而修改事件绑定。

**传统写法**

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 </td> 
 <td> <code>&lt;ul id=</code><code>"list"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;li id=</code><code>"item1"</code> <code>&gt;item1&lt;/li&gt;</code> <code>&nbsp;</code><code>&lt;li id=</code><code>"item2"</code> <code>&gt;item2&lt;/li&gt;</code> <code>&nbsp;</code><code>&lt;li id=</code><code>"item3"</code> <code>&gt;item3&lt;/li&gt;</code> <code>&lt;/ul&gt;</code> &nbsp; <code>&lt;script&gt;</code> <code>var</code> <code>list = document.getElementById(</code><code>"list"</code><code>);</code> &nbsp; <code>var</code> <code>item = list.getElementsByTagName(</code><code>"li"</code><code>);</code> <code>for</code><code>(</code><code>var</code> <code>i=0;i&lt;item.length;i++){ </code> <code>&nbsp;</code><code>(</code><code>function</code><code>(i){ </code> <code>&nbsp;</code><code>item[i].onclick = </code><code>function</code><code>(){ </code> <code>&nbsp;</code><code>alert(item[i].innerHTML);</code> <code>&nbsp;</code><code>}</code> <code>&nbsp;</code><code>})(i)</code> <code>}</code> &nbsp; <code>var</code> <code>node=document.createElement(</code><code>"li"</code><code>);</code> <code>var</code> <code>textnode=document.createTextNode(</code><code>"item4"</code><code>);</code> <code>node.appendChild(textnode);</code> <code>list.appendChild(node);</code> &nbsp; <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

点击item1到item3都有事件响应，但是点击item4时，没有事件响应。说明传统的事件绑定无法对动态添加的元素而动态的添加事件。

**事件委托**

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 </td> 
 <td> <code>&lt;ul id=</code><code>"list"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;li id=</code><code>"item1"</code> <code>&gt;item1&lt;/li&gt;</code> <code>&nbsp;</code><code>&lt;li id=</code><code>"item2"</code> <code>&gt;item2&lt;/li&gt;</code> <code>&nbsp;</code><code>&lt;li id=</code><code>"item3"</code> <code>&gt;item3&lt;/li&gt;</code> <code>&lt;/ul&gt;</code> &nbsp; <code>&lt;script&gt;</code> <code>var</code> <code>list = document.getElementById(</code><code>"list"</code><code>);</code> &nbsp; <code>document.addEventListener(</code><code>"click"</code><code>,</code><code>function</code><code>(event){ </code> <code>&nbsp;</code><code>var</code> <code>target = event.target;</code> <code>&nbsp;</code><code>if</code><code>(target.nodeName == </code><code>"LI"</code><code>){ </code> <code>&nbsp;</code><code>alert(target.innerHTML);</code> <code>&nbsp;</code><code>}</code> <code>})</code> &nbsp; <code>var</code> <code>node=document.createElement(</code><code>"li"</code><code>);</code> <code>var</code> <code>textnode=document.createTextNode(</code><code>"item4"</code><code>);</code> <code>node.appendChild(textnode);</code> <code>list.appendChild(node);</code> &nbsp; <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

当点击item4时，item4有事件响应。说明事件委托可以为新添加的DOM元素动态的添加事件。

[Link 1]: https://www.jb51.net/article/93752.htm#