JS事件流与事件处理程序实例分析

前端  /  管理员 发布于 4年前   226

本文实例讲述了JS事件流与事件处理程序。分享给大家供大家参考，具体如下：

1.事件流：从页面中接收事件的顺序

1.1 IE ：事件冒泡流
1.2 Netscape ：事件捕获
1.3 DOM事件流 ：事件捕获阶段――事件目标阶段――事件冒泡阶段
DOM2级事件规定 ：捕获阶段不会涉及目标事件。

2.事件处理程序

事件 ：用户或者浏览器自身执行的 某种动作
事件处理程序 ：响应某个事件的 函数 。

2.1 HTML事件处理程序

用一个与该事件处理程序同名的HTML特性来指定。

2.1.1包含要执行的具体动作

2.1.2 调用其他地方定义的脚本

2.1.3 缺点

• 1.时差问题：使用try-catch块捕捉错误。onclick="try { showMessage() ;} catch(ex) {} "

• 2.程序的作用域链在不同浏览器中会导致不同结果
• 3.HTML和JS代码耦合紧密

2.2 DOM0级事件处理程序

将一个函数赋值给一个事件处理程序属性，例如：onclick。

为事件处理程序赋值。

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

事件处理程序在元素的作用域中运行，this指向当前元素。

删除事件处理程序：

btn.onclick = null;

2.3 DOM2级事件处理程序

addEventListener(处理的事件名，事件处理程序函数，布尔值)；

removeEventListener(处理的事件名，事件处理程序函数，布尔值)；

布尔值：捕获阶段调用事件处理程序：true。冒泡阶段调用：false。大多数情况下用false。

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

好处：可以添加多个事件处理程序。事件按照添加先后顺序执行。

问题：匿名函数无法移除。

最好写成

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

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);

PS：这里再为大家附上javascript系统自带事件参考表供大家参考查询：

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

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

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

您可能感兴趣的文章:

• JavaScript 事件流、事件处理程序及事件对象总结
• 学习JavaScript事件流和事件处理程序
• 详解JavaScript中的事件流和事件处理程序
• Javascript 事件流和事件绑定
• javascript下对于事件、事件流、事件触发的顺序随便说说
• 深入理解JS的事件绑定、事件流模型
• JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
• JavaScript事件学习小结（一）事件流
• 浅谈Javascript事件处理程序的几种方式
• JavaScript事件处理程序(事件侦听器)
• javascript 事件处理程序介绍
• 探究JavaScript中的五种事件处理程序方式