本文共 1569 字，大约阅读时间需要 5 分钟。

DOM 事件绑定指南

DOM0级事件

DOM0级事件是早期IE和Netscape开发的，主要用于HTML文档的事件处理。它支持简单的单事件监听。

写法一

可以直接将事件函数写在标签内：

写法二

也可以通过DOM方法添加事件：

btn.onclick = function() {    console.log('点击了！');};

事件参数

如果需要获取更多信息，可以使用event参数：

btn.onclick = function(event) {    console.log('点击了！');    console.log(event);};

• event对象包含详细的屏幕坐标和参考坐标。
• 使用event.srcElement可以获取被点击的DOM元素。
• 其他属性可用以获取更多信息。

事件覆盖问题

当同一元素多次绑定同类事件时，会按最后一次绑定的事件执行：

btn.onclick = function() {    console.log('点击了—1');};btn.onclick = function() {    console.log('点击了—2');};

结果只会显示点击了—2。

解决事件覆盖

可以通过调用函数来增加独立性：

function fn1() {    console.log('点击了—1');}function fn2() {    console.log('点击了—2');}btn.onclick = function() {    fn1.call(this);    fn2.call(this);};

DOM1级事件

DOM1级由W3C制定，主要用于HTML和XML文档，保留了Events对象的结构。

DOM2级事件

DOM2对DOM1的基础上扩展，增加了样式表对象模型和事件绑定API。其主要特点是支持addEventListener。

常用写法

btn.addEventListener("click", function(event) {    console.log('点击了!');});

事件绑定参数

addEventListener的参数：

element.addEventListener(event, function, useCapture)

• event：必填，事件名称字符串。
• function：处理事件的函数。
• useCapture：布尔值，默认false，表示事件是冒泡型。

给一个元素多次绑定同类事件

btn.addEventListener("click", function(event) {    console.log('点击了—1');});btn.addEventListener("click", function(event) {    console.log('点击了—2');});

事件执行顺序从前到后。

披破和捕获

• 冒泡型（默认`)：事件向上传播。
• 捕获型（useCapture=true）：事件向下传播。

例子

以下结构：

   
    
    
        
     
                  点击        
     
    
    
   

用冒泡型事件执行顺序：

用捕获型事件执行顺序：

移除事件和阻止冒泡

• 移除事件：removeEventListener()。
• 阻止冒泡：event.stopPropagation()（IE支持event.cancelBubble()）。

通过以上方法，可以在不同阶段对事件作出处理，提升交互体验。

转载地址：http://bxrhz.baihongyu.com/