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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 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学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
python pygame实现球球大作战
2019/11/25 Python
python3实现弹弹球小游戏
2019/11/25 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Keras实现DenseNet结构操作
2020/07/06 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
自考毕业生自我鉴定
2013/11/04 职场文书
宿舍违规检讨书
2014/01/12 职场文书
面试后的英文感谢信
2014/02/01 职场文书
中学生寄语大全
2014/04/03 职场文书
小班上学期评语
2014/05/05 职场文书
大学生社会实践方案
2014/05/11 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
三方协议书
2015/01/27 职场文书
专家推荐信范文
2015/03/26 职场文书
英文投诉信格式
2015/07/03 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
python全面解析接口返回数据
2022/02/12 Python