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 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
原生js实现贪吃蛇游戏
Oct 26 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 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实现图片缩放功能类
2013/12/18 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
js中有关IE版本检测
2012/01/04 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Django后台admin的使用详解
2019/07/08 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
家佳咖啡店创业计划书
2013/12/27 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
2014组织生活会方案
2014/05/19 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
校运会广播稿
2015/08/19 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android
Golang 对es的操作实例
2022/04/20 Golang