JavaScript事件机制：从DOM流到跨浏览器兼容实现

JavaScript事件机制概述

事件是连接JavaScript脚本与网页的核心纽带，也是JavaScript中最关键的议题之一。深入理解事件的工作机制及其对性能的影响至关重要。本文将深入探讨JavaScript的事件机制，对比分析不同浏览器间的差异，具体内容包括事件流、事件处理程序的绑定方式以及事件对象等关键概念。

如何理解事件？

JavaScript与HTML之间的交互正是通过事件来实现的。

所谓事件，是指用户操作或浏览器自身执行的某种动作，即文档或浏览器发生的一些特定交互瞬间。

事件处理程序，也称为事件侦听器，是指在事件发生时执行的代码段。

事件流描述了从页面中接收事件的顺序。

两种基本事件模型：冒泡与捕获

存在两种基本的事件模型。

事件冒泡是指事件按照从最特定的事件目标到最不特定的事件目标（即document对象）的顺序触发。

事件捕获则是指事件从最不精确的对象（document对象）开始触发，然后逐渐传递到最精确的目标。

IE9、Safari、Chrome、Opera和Firefox等浏览器均从window对象开始捕获，并最终冒泡到window对象。

DOM事件流与IE事件流对比

DOM事件流。

DOM同时支持两种基本事件模型，并规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

在绑定DOM事件处理程序时，程序员可以自行选择采用事件捕获还是事件冒泡模型。

IE事件流。

IE浏览器仅支持事件冒泡，不支持事件捕获。

事件处理程序的绑定方式

事件处理程序的绑定方式。

DOM事件处理程序。

DOM事件处理程序的属性名为“on”加上事件名，其程序作用域为元素的作用域，this指向元素本身。

方法一：将函数值直接赋给一个事件处理程序属性。具体代码如下：

var btn= document.getElementById("myBtn"); 
btn.onclick = function{ //具体代码段 }

注意：此种方法只能添加一个事件处理程序。

方法二：通过addEventListener方法。具体代码如下：

addEventListener("事件名"，事件处理程序，true/false:指定在事件捕获/冒泡阶段调用模型)

对应的事件处理程序移除方法为：removeEventListener，其参数必须与添加时完全相同。

注意：此种方法下，以匿名函数添加的事件处理程序无法被移除。

此方法可以添加多个事件处理程序。

IE事件处理程序。

适用于IE及Opera浏览器。

其程序作用域为全局作用域，this指向window对象。

添加方法：attachEvent("on+事件名"，事件处理程序)

移除方法：detachEvent("on+事件名"，事件处理程序)

事件对象详解与跨浏览器实现

事件对象。

在触发某个事件时，会产生一个相应的事件对象，该对象包含所有与事件相关的信息，例如导致事件的元素、事件的类型等。

DOM中的事件对象。

对象名为：event

常用属性包括：

type：被触发事件的类型

target：事件的目标

常用方法包括：

event.preventDefault：用于取消事件默认行为（前提条件是cancelable属性值为true）

event.stopPropagation：用于取消事件的进一步冒泡或捕获

IE中的事件对象。

对象名为：window.event

常用属性包括：

type：被触发事件的类型

srcElement：事件的目标

常用方法包括：

event.cancelBubble(true/false)：true表示取消事件默认行为；event.returnValue(true/false)：false表示取消事件的进一步冒泡或捕获

综合以上所述，整理代码以编写可跨浏览器的事件处理程序（构造EventUtil对象，为其添加可兼容各浏览器的事件处理方法），具体代码如下：

/*可跨浏览器的事件处理程序
构造EventUtil对象，为其添加可兼容各浏览器的事件处理方法
*/
var EventUtil = {
  /*添加事件处理程序*/
  addHandler: function (element, type, handler) {
    if (element.addEventListener) {
      addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  },
  /*移除事件处理程序*/
  removeHandler: function (element, type, handler) {
    if (element.removeEventListener) {
      removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      detachEvent("on" + type, handler);
    } else {
      element["on" + type] = null;
    }
  },
  /*获得事件对象*/
  getEvent: function (event) {
    return event ? event : window.event;
  },
  /*获得事件的目标*/
  getTarget: function (event) {
    return event.target || event.scrElement;
  },
  /*取消事件的默认行为*/
  preventDefault: function (event) {
    if (event.preventDefault) {
      event.preventDefault;
    } else {
      event.returValue = false;
    }
  },
  /*阻止事件进一步冒泡*/
  stopPropagation: function (event) {
    if (event.stopPropagation) {
      event.stopPropagation;
    } else {
      event.cancelBubble = true;
    }
  }
};

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！