JavaScript 事件绑定、监听与委托详解

作者：窗边听雨时间：2026-10-30 14:47:43浏览：624

本文深入解析 JavaScript 中的三种事件处理方式：直接绑定、代码内绑定及事件监听。重点介绍 W3C 标准的 addEventListener 与 IE 兼容的 attachEvent，阐述捕获、目标、冒泡三阶段机制。同时通过实例对比传统绑定与事件委托，说明如何利用冒泡原理提升动态 DOM 操作的性能与灵活性。

JavaScript 事件机制概述

在 JavaScript 开发过程中，事件机制是核心概念之一，常见术语包括事件绑定、事件监听以及事件委托（也称事件代理）。理解这些概念的定义及其具体作用，对于编写高质量的交互代码至关重要。

事件绑定方式

事件绑定

若要让 JavaScript 响应用户的操作，必须首先为 DOM 元素绑定相应的事件处理函数。所谓事件处理函数，即用于处理用户交互行为的函数，不同的交互行为对应不同的事件类型。

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

直接在 DOM 元素属性中绑定；
在 JavaScript 代码内部进行绑定；
使用事件监听函数进行绑定。

在 DOM 中直接绑定事件

我们可以在 DOM 元素上直接指定 onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup 等事件属性。此处未列举所有类型，如需了解更多事件类型，请参阅 DOM 事件文档。


<input type="button" value="click me" onclick="hello()">

<script>
function hello(){
 alert("hello world!");
}
</script>

在 JavaScript 代码中绑定事件

在 JavaScript 代码（即 script 标签内）中绑定事件，可以使 JavaScript 逻辑与 HTML 结构分离，保持文档结构清晰，从而更便于后续的管理与维护开发。


<input type="button" value="click me" id="btn">

<script>
document.getElementById("btn").onclick = function(){
 alert("hello world!");
}
</script>

使用事件监听绑定事件

绑定事件的另一种常用方法是利用 addEventListener() 或 attachEvent() 来绑定事件监听函数。下文将对此进行详细介绍，重点讲解事件监听机制。

事件监听与 W3C 规范

事件监听

根据 W3C 规范，事件监听定义了三个事件阶段，依次顺序为：捕获阶段、目标阶段和冒泡阶段。

早期 Netscape 制定了基于事件捕获的 JavaScript 事件驱动机制，随后 IE 推出了基于事件冒泡的事件驱动机制。最终 W3C 规范整合了这两种机制，将其划分为捕获阶段、目标阶段和冒泡阶段。在 IE8 之前，IE 浏览器坚持使用其私有机制，这给前端开发带来了兼容性问题；自 IE9 起，IE 也开始支持 W3C 规范。

W3C 规范

语法如下：

element.addEventListener(event, function, useCapture)

event：（必需）指定事件名称，支持所有 DOM 事件。

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

useCapture：（可选）指定事件句柄在哪个阶段执行。值为 true 时代表在捕获阶段执行，值为 false 时代表在冒泡阶段执行，默认值为 false。

注意：IE8 及以下版本浏览器不支持此方法。


<input type="button" value="click me" id="btn1">

<script>
document.getElementById("btn1").addEventListener("click",hello);
function hello(){
 alert("hello world!");
}
</script>

IE 标准

语法如下：

element.attachEvent(event, function)

event：（必需）指定事件类型，字符串需加上“on”前缀，例如：onclick。

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


<input type="button" value="click me" id="btn2">

<script>
document.getElementById("btn2").attachEvent("onclick",hello);
function hello(){
 alert("hello world!");
}
</script>

事件监听的优点

1、支持绑定多个事件处理函数。


<input type="button" value="click me" id="btn3">

<script>
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
 alert("hello 1"); //不执行
}
btn3.onclick = function(){
 alert("hello 2"); //执行
}
</script>

常规的事件绑定方式中，如果多次绑定同一事件，只有最后绑定的事件会执行。


<input type="button" value="click me" id="btn4">

<script>
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);

function hello1(){
 alert("hello 1");
}
function hello2(){
 alert("hello 2");
}
</script>

而使用事件监听时，两个绑定的事件都会依次执行。

2、支持解除相应的绑定。


<input type="button" value="click me" id="btn5">

<script>
var btn5 = document.getElementById("btn5");
btn5.addEventListener("click",hello1);//执行了
btn5.addEventListener("click",hello2);//不执行
btn5.removeEventListener("click",hello2);

function hello1(){
 alert("hello 1");
}
function hello2(){
 alert("hello 2");
}
</script>

封装事件监听


<input type="button" value="click me" id="btn5">

//绑定监听事件
function addEventHandler(target,type,fn){
 if(target.addEventListener){
 target.addEventListener(type,fn);
 }else{
 target.attachEvent("on"+type,fn);
 }
}

//移除监听事件
function removeEventHandler(target,type,fn){
 if(target.removeEventListener){
 target.removeEventListener(type,fn);
 }else{
 target.detachEvent("on"+type,fn);
 }
}

//测试
var btn5 = document.getElementById("btn5");
addEventHandler(btn5,"click",hello1);//添加事件hello1
addEventHandler(btn5,"click",hello2);//添加事件hello2
removeEventHandler(btn5,"click",hello1);//移除事件hello1

事件委托原理与应用

事件委托

事件委托利用事件冒泡的原理，将事件处理程序添加到父元素或祖先元素上，从而触发子元素的事件响应效果。


<input type="button" value="click me" id="btn6">

var btn6 = document.getElementById("btn6");
document.onclick = function(event){
 event = event || window.event;
 var target = event.target || event.srcElement;
 if(target == btn6){
 alert(btn5.value);
 }
}

上述示例仅为简化演示。在实际开发中，我们可能会用到 jQuery 提供的 live()、delegate()、bind()、on() 等方法来实现类似功能。

事件委托优点

1、提高 JavaScript 性能。事件委托可以显著提高事件处理的速度，并减少内存占用。关于 JavaScript 中事件委托和事件绑定的实例分析文章对此有详细论述。

传统写法


<ul id="list">
 <li id="item1" >item1</li>
 <li id="item2" >item2</li>
 <li id="item3" >item3</li>
</ul>

<script>
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");

item1.onclick = function(){
 alert("hello item1");
}
item2.onclick = function(){
 alert("hello item2");
}
item3.onclick = function(){
 alert("hello item3");
}
</script>

事件委托


<ul id="list">
 <li id="item1" >item1</li>
 <li id="item2" >item2</li>
 <li id="item3" >item3</li>
</ul>

<script>
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");

document.addEventListener("click",function(event){
 var target = event.target;
 if(target == item1){
 alert("hello item1");
 }else if(target == item2){
 alert("hello item2");
 }else if(target == item3){
 alert("hello item3");
 }
})
</script>

2、动态添加 DOM 元素时，无需因元素变动而重新修改事件绑定逻辑。

传统写法


<ul id="list">
 <li id="item1" >item1</li>
 <li id="item2" >item2</li>
 <li id="item3" >item3</li>
</ul>

<script>
var list = document.getElementById("list");

var item = list.getElementsByTagName("li");
for(var i=0;i<item.length;i++){
 (function(i){
 item[i].onclick = function(){
 alert(item[i].innerHTML);
 }
 })(i)
}

var node=document.createElement("li");
var textnode=document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);

</script>

点击 item1 到 item3 时均有事件响应，但点击动态添加的 item4 时，没有事件响应。这表明传统的事件绑定方式无法自动为动态添加的元素绑定事件。

事件委托


<ul id="list">
 <li id="item1" >item1</li>
 <li id="item2" >item2</li>
 <li id="item3" >item3</li>
</ul>

<script>
var list = document.getElementById("list");

document.addEventListener("click",function(event){
 var target = event.target;
 if(target.nodeName == "LI"){
 alert(target.innerHTML);
 }
})

var node=document.createElement("li");
var textnode=document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);

</script>

当点击动态添加的 item4 时，item4 能够正常响应事件。这说明事件委托机制可以为新添加的 DOM 元素动态地绑定事件处理程序。

通过本文，希望能帮助到大家，谢谢大家对本站的支持！

作者最新文章

anime.js 快速入门：怎么引入库并编写第一个 DOM 动画

2026-11-05 14:22:43

在线JS解密后变量名仍乱码？结合浏览器DevTools调试还原

2026-11-04 20:26:01

怎么在浏览器中运行JavaScript代码并查看输出结果

2026-11-04 09:07:33

JS 获取屏幕分辨率：window.screen.width 与 height 用法

2026-11-04 08:52:48

为什么推荐用DOMContentLoaded代替window.onload初始化JS

2026-11-04 08:42:33