JavaScript DOM 事件绑定方式详解：从 onclick 到 addEventListener

JavaScript DOM 事件绑定概述

本文通过具体实例，详细讲解 JavaScript 中 DOM 元素的事件绑定操作方法，旨在为读者提供清晰的参考与指导。

事件绑定基础与 this 指向

JavaScript DOM 事件绑定基础

// 先获取Dom对象，然后进行绑定
document.getElementById('xx').onclick
document.getElementById('xx').onfocus
// 谁调用这个函数,这个this就指向谁

在事件处理函数中，关键字 this 通常指向触发该事件的当前 DOM 元素；若在全局作用域调用，则指向全局对象 window。

DOM 事件绑定的三种方式

一、事件绑定的常见方式

<input id='i1' type='button' onclick='ClickOn(this)'>

function ClickOn(this){
   // this 带指当前点击的标签
}

二、其他绑定方式

<input id='i1' type='button'>

document.getElementById('i1').onclick = function(){
   // this 带指当前点击的标签
}
var myTrs = document.getElementsByTagName("tr");
var len = myTrs.length;
for(var i=0;i<len;i++){
  myTrs[i].onmouseover = function(){ //绑定事件
  this.style.backgroundColor = "red";
}

W3C 标准：addEventListener 详解

三、W3C 标准绑定方式

使用 addEventListener 方法可以实现一次事件触发多个回调函数的效果，这是 W3C 推荐的标准做法。

代码示例展示了如何为同一标签绑定两个点击事件： 标签对象.addEventListener('click',function(){console.log('aaa');},false); 标签对象.addEventListener('click',function(){console.log('bbb');},false);

注意：addEventListener 接收三个参数，其中第三个参数为 false 时，表示采用冒泡模型（Bubbling）。

注意：当第三个参数为 true 时，表示采用捕获模型（Capturing）。

冒泡与捕获模型的区别

具体应用示例如下：

通过遍历标签元素，实现鼠标单击后，父级 A 与子级 a 同时触发各自的事件处理逻辑。

<div id='A'>
  <div id='a'></div>
</div>

a.addEventListener('click',function(){console.log('aaa');},false);
A.addEventListener('click',function(){console.log('AAA');},false);

在冒泡模型中，事件执行顺序为：子元素 a 先输出，随后父元素 A 后输出。

在捕获模型中，事件执行顺序相反：父元素 A 先输出，子元素 a 后输出。

相关资源与参考

此外，本文还附上 JavaScript 系统自带的事件参考表，供开发者查询使用：

JavaScript 事件与功能说明大全： http://tools.jb51.net/table/javascript_event

如需了解更多 JavaScript 相关内容，建议查阅本站系列专题：《JavaScript事件相关操作与技巧大全》、《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》。

希望本文的阐述能对大家的 JavaScript 程序设计工作有所帮助。