为html元素绑定事件的三种方式

gzzeason

已于 2025-07-28 13:05:57 修改

阅读量345

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript 前端

于 2025-06-29 16:21:31 首次发布

本文链接：https://blog.youkuaiyun.com/qq_62914927/article/details/148998988

浏览器的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式（event-driven）的主要编程方式。

JavaScript 有三种方法，可以为事件绑定监听函数。

一、html标签的"on-事件名"属性

给"on-事件名"属性赋值。

<body onload="doSomething()">
<div onclick="console.log('触发事件')">

直接设置on-属性，与通过元素节点的setAttribute方法设置on-属性，效果是一样的。

el.setAttribute('onclick', 'doSomething()');
// 等同于
// <Element onclick="doSomething()">

注意点一：此种绑定只会在冒泡阶段触发。

注意点二：原样传入JavaScript引擎执行而不是函数引用。

<!-- 正确 -->
<body onload="doSomething()">

<!-- 错误 -->
<body onload="doSomething">

二、（用选择器选择元素操作）元素节点的事件属性

与一的区别是将元素选择下来了且赋值的是函数的引用。此种绑定也只会在冒泡阶段触发。

// 获取元素节点
const button = document.getElementById('myButton');

// 通过事件属性指定监听函数
button.onclick = function() {
  console.log('按钮被点击了！');
  alert('按钮被点击了！');
};

三、EventTarget.addEventListener() 方法最常用

使用选择器将元素选择到js代码块中，使用elemet.addEventListener(type, listener) 为选定节点添加事件监听。

button = document.getElementById('btn');
button.addEventListener('click', () => {
	alert('Button clicked!');
});

上述三者优劣对比：

第一种HTML “的 on- 属性”，违反了 HTML 与 JavaScript 代码相分离的原则，将两者写在一起，不利于代码分工，且无法控制阶段，绑定只会在冒泡阶段触发。因此不推荐使用。

第二种“元素节点的事件属性”的缺点在于，同一个事件只能定义一个监听函数，也就是说，如果定义两次onclick属性，后一次定义会覆盖前一次，且无法控制阶段，绑定只会在冒泡阶段触发。因此，也不推荐使用。

第三种EventTarget.addEventListener是推荐的指定监听函数的方法。它有如下优点：

同一个事件可以添加多个监听函数。
能够指定在哪个阶段（捕获阶段还是冒泡阶段）触发监听函数。
除了 DOM 节点，其他对象（比如window、XMLHttpRequest等）也有这个接口，它等于是整个 JavaScript 统一的监听函数接口。