JavaScript中为事件指定处理程序的五种方式分析


Posted in Javascript onJuly 27, 2018

本文实例讲述了JavaScript中为事件指定处理程序的五种方式。分享给大家供大家参考,具体如下:

JavaScript和HTML之间的交互是通过事件实现的。

IE9、Firefox、Opera、Sarifi、Chrome都已经实现了DOM2级事件模块的核心部分,IE8是最后一个仍然使用其专有事件系统的主要浏览器。

事件流:

事件流描述的是从页面中接受事件的顺序,但IE和Netscape却提出了完全相反的事件流的概念,IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流。

1) 事件冒泡

事件开始时由最具体的元素(文档中嵌套层次最深的那个节点接收,然后逐级向上传播到较为不具体的节点(文档)。

不支持事件冒泡的事件:blurfocusloadunload

2) 事件捕获

不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于事件到达预定目标之前捕获它。

虽然IE9、Safari、Chrome、Firefox、Opera都支持事件捕获和事件冒泡,但IE8及其更早版本只支持事件冒泡,不支持事件捕获,因此。建议使用事件冒泡,在有特殊需要的时候再使用事件捕获。

DOM事件流:

DOM2级事件规定的事件流包括三个阶段:事件捕获阶段,处于目标阶段和事件冒泡阶段。实际上,在事件捕获阶段预定目标不会接收到事件,处于目标阶段事件在预定目标上发生。事件处理中,处于目标阶段被看成事件冒泡阶段的一部分。但是,即使“DOM2级事件”规范明确要求捕获阶段不会涉及事件目标,但IE9、 Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件,结果是有两个机会在目标对象上操作事 件。

IE9、Firefox、Opera、Sarifi、Chrome都支持DOM事件流,IE8及其更早版本不支持DOM事件流。

事件处理程序:

事件就是用户或浏览器自身执行的某种动作,而响应某个事件的函数就是事件处理程序(或事件侦听器),事件处理程序的名字以“on”开头。

JavaScript中有五种事件处理程序方式:

1) HTML事件处理程序

每种事件都可以使用一个与相应事件处理程序同名的HTML特性来指定,特性的值可以是能够执行的JavaScript代码,也可以是函数。函数中有一个局部变量event,通过event变量可以访问事件对象;在函数内部,this值等于事件的目标元素。

在HTML中指定事件处理程序的几个缺点:

① 时差问题:用户可能在HTML元素一出现在页面上就触发相应的事件,但当时的事件处理程序有可能尚不具备执行条件,如用户在解析事件处理函数之前就触发事件。为此,很多HTML事件处理程序都会封装在一个try-catch块中,以便及时捕获错误,以免错误抛出被用户看到。

② 扩展事件处理程序的作用域链在不同浏览器中会导致不同的结果。不同JavaScript引擎遵循的标识符解析规则略有差异,很有可能会在访问非限定对象成员时出错。

③ HTML代码与JavaScript代码紧密耦合,更换事件处理程序需要改动HTML代码与JavaScript代码。

2) DOM0级事件处理程序

通过JavaScript指定事件处理程序的传统方式,将一个函数赋值给一个事件处理程序属性。使用DOM0级方法指定的事件处理程序被认为是元素的方法,因此this引用当前元素。

DOM0级事件处理程序的优势:

① 简单;

② 跨浏览器

可以通过将事件处理程序的值设置为null来删除通过DOM0级方法指定的事件处理程序。

3) DOM2级事件处理程序

DOM2级事件定义了两种方法,用于指定和删除事件处理程序的操作:addEventListener()removeEventListener(),它们都接收3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值(true表示在捕获阶段调用事件处理程序,false表示在冒泡阶段调用事件处理程序)。

DOM2级事件处理程序的优势:

可以添加多个事件处理程序,它们会按照添加它们的顺序触发。

通过addEventListener()添加的事件处理程序只能用removeEventListener()来移除,但要求移除时传入的参数与添加事件处理程序时使用的参数相同,因此通过addEventListener()添加的匿名函数将无法移除,需要给removeEventListener()传入addEventListener()中命名的函数才能正常移除。

4) IE事件处理程序

IE事件定义了两个方法:attachEvent()detachEvent(),它们都接收2个参数:要处理的事件名、作为事件处理程序的函数.由于IE8及其更早版本只支持事件冒泡,所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

注意:通过IE的attachEvent()添加的事件处理程序的名字以“on”开头,而通过DOM的addEventListener()添加的名字不是。

在IE中使用attachEvent()与使用DOM0级方法的主要区别:

事件处理程序的作用域不同。在IE中使用attachEvent(),事件处理程序会在全局作用域中运行,因此this等于window;而使用DOM0级方法,事件处理程序会在其所属元素的作用域中运行。

在IE中使用attachEvent()与使用DOM2级方法的区别:

添加多个事件处理程序的执行顺序不同。在IE中使用attachEvent(),可以添加多个事件处理程序,它们会按照添加它们的相反顺序触发;在DOM中使用addEventListener(),可以添加多个事件处理程序,但它们会按照添加它们的顺序触发。

通过attachEvent()添加的事件处理程序只能用detachEvent()来移除,但要求移除时传入的参数与添加事件处理程序时使用的参数相同,因此通过attachEvent()添加的匿名函数将无法移除,需要给detachEvent()传入attachEvent()中命名的函数才能正常移除。

5) 跨浏览器的事件处理程序

要保证事件处理程序的代码在大多数浏览器下一致地运行,只需关注冒泡阶段。

视情况分别使用DOM2级方法、IE方法、DOM0级方法来添加和移除事件,addHandler()removeHandler()方法属于EventUtil对象。

① 先检测传入的元素是否存在DOM2级方法(传入的第三个参数为false以表示冒泡阶段);

② 再检测传入的元素是否存在IE的方法;

③ 最后检测传入的元素是否存在DOM0级方法(使用方括号语法将属性名指定为事件处理程序)。

var EventUtil = {
  addHandler:function(element, type, handler) {
    if (element.addEventListener)
      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.removeEventListener)
      element.removeEventListener(type, handler, false);
    else if (element.detachEvent)
      element.detachEvent(“on” + type, handler);
    else
      element["on" + type] = null;
  }
}

PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.3water.com/table/javascript_event

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

Javascript 相关文章推荐
常用简易JavaScript函数
Apr 09 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
js 代码优化点滴记录
Feb 19 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
浅谈Redux中间件的实践
Jul 27 #Javascript
JavaScript多态与封装实例分析
Jul 27 #Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 #Javascript
react native 文字轮播的实现示例
Jul 27 #Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 #Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 #Javascript
在vue中使用Autoprefixed的方法
Jul 27 #Javascript
You might like
PHP中动态HTML的输出技术
2006/10/09 PHP
php 动态执行带有参数的类方法
2009/04/10 PHP
php模板函数 正则实现代码
2012/10/15 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
Python 解析xml文件的示例
2020/09/29 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
Structs界面控制层技术
2013/10/11 面试题
音乐系毕业生自荐信
2013/10/27 职场文书
优秀员工表扬信
2014/01/17 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
校庆标语集锦
2014/06/25 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL