JavaScript事件流机制与事件处理程序详解

JavaScript事件流机制

本文通过具体示例解析JavaScript中的事件流机制与事件处理程序，旨在为开发者提供清晰的参考与学习素材。

1. 事件流：即从页面接收事件的具体顺序。

1.1 IE浏览器采用事件冒泡流模型。 1.2 Netscape浏览器采用事件捕获模型。 1.3 DOM事件流包含三个阶段：事件捕获阶段、处于目标阶段以及事件冒泡阶段。 根据DOM2级事件规范，捕获阶段不涉及目标元素上的事件处理。

事件处理程序详解

2. 事件处理程序：用于响应特定事件的函数。

事件是指由用户操作或浏览器内部触发的动作；而事件处理程序则是针对这些事件所定义的响应函数。

HTML事件处理程序

2.1 HTML事件处理程序。

通过指定与事件处理程序同名的HTML属性来绑定逻辑。

2.1.1 直接在HTML特性中嵌入具体执行动作。

<input type="button" value="Click me" onclick="alert('Clicked')"/>

2.1.2 调用外部脚本中已定义的函数。

<input type="button" value="Click me" onclick="showMessage()"/>

2.1.3 该方式存在以下主要缺点：

• 1. 存在时差问题，可通过try-catch块捕获错误来缓解。onclick="try { showMessage() ;} catch(ex) {} "

• 2. 不同浏览器中作用域链的差异会导致执行结果不一致。
• 3. HTML结构与JavaScript代码耦合度较高，不利于维护。

DOM0级事件处理程序

2.2 DOM0级事件处理程序。

将函数赋值给特定的事件处理程序属性，例如onclick。

通过赋值操作来设置事件处理程序。

btn.onclick = function() {
  alert( this.id );
};

此类处理程序在元素的作用域内运行，this关键字指向当前触发事件的元素。

移除事件处理程序的方法如下：

btn.onclick = null;

DOM2级事件处理程序

2.3 DOM2级事件处理程序。

使用addEventListener(事件名，处理函数，布尔值)进行绑定；

使用removeEventListener(事件名，处理函数，布尔值)进行解绑；

布尔参数用于指定调用阶段：true表示在捕获阶段调用，false表示在冒泡阶段调用，通常推荐使用false。

btn.addEventListener("click" , function() {
  alert(this.id);
}, false);

优势：支持为同一元素添加多个事件处理程序，且按照添加顺序依次执行。

局限性：若使用匿名函数，则无法通过removeEventListener移除。

建议将处理函数定义为具名变量以便管理。

var handler = function(){
  alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);

IE事件处理程序

2.4 IE事件处理程序。

使用attachEvent(事件名，处理函数)进行绑定； 使用detachEvent(事件名，处理函数)进行解绑；

通过该方法添加的所有事件处理程序均被添加到冒泡阶段。

btn.attachEvent("onclick",function(){
  alert("clicked");
});

注意：使用DOM标准方法时，事件在所属元素作用域内运行；而使用attachEvent()时，处理程序在全局作用域运行，此时this指向window对象。

优势：支持为同一元素添加多个事件处理程序，但执行顺序与添加顺序相反（后添加的先执行）。

局限性：同样无法移除匿名函数。

var handler = function(){
  alert(this.id);
};
btn.attachEvent ("onclick", handler);
btn.detachEvent ("onclick", handler);

跨浏览器事件处理程序

2.5 跨浏览器事件处理程序。

• 1. 封装addHandler()方法，用于判断并选择合适的事件绑定方式；
• 2. 构建EventUtil对象，包含相关处理方法。
• 3. addHandler(操作元素，事件名称，处理函数)。
• 4. removeHandler(操作元素，事件名称，处理函数)。

var EventUtil = {
  addHandler: function(element,type,handler){
    if(element.addEventLister) {
      element.addEventListener(type,handler,false);
    } else if(element.attachEvent) {
      element.attachEvent("on"+type, handler);
    }else {
      element.["on"+type] =handler;
    }
  },
  removeHandler: function(element,type,handler){
    if(element.addEventLister) {
      element.removeEventListener(type,handler,false);
    } else if(element.attachEvent) {
      element.detachEvent("on"+type, handler);
    }else {
      element.["on"+type] = null;
    }
  }
};

具体使用示例如下：

EventUtil.addHandler(btn ,"click",handler);
EventUtil.removeHandler(btn ,"click",handler);

此外，附上JavaScript系统自带事件参考表供查询：

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

更多关于JavaScript相关内容可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述内容对大家的JavaScript程序设计有所帮助。