JavaScript的事件机制详解


Posted in Javascript onJanuary 17, 2017

事件是将JavaScript脚本与网页联系在一起的主要方式,是JavaScript中最重要的主题之一,深入理解事件的工作机制以及它们对性能的影响至关重要。本文将详细探讨JavaScript的事件机制,并对比分析了浏览器之间的不同,具体内容包括事件流、事件处理程序绑定方式、事件对象等。

如何理解事件?

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

事件:用户或浏览器自身执行的某种动作,换言之,文档或浏览器发生的一些特定的交互瞬间。

事件处理程序:又称事件侦听器,事件发生时执行的代码段。

事件流:事件流描述的是从页面中接收事件的顺序。

两种基本事件模型

事件冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

事件捕获:事件从最不精确的对象(document 对象)开始触发,然后到最精确。

IE9、Safari、Chrome、Opera、Firefox都是从window对象开始捕获,冒泡到window对象

JavaScript的事件机制详解

DOM事件流

同时支持 两种基本事件模型,规定事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。

DOM事件处理程序绑定时,程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡。

IE事件流

IE只支持事件冒泡,不支持事件捕获。

事件处理程序绑定方式

DOM事件处理程序

DOM事件处理程序属性名为“on”+事件名,程序作用域为元素的作用域,this指向元素本身。

方法一:将函数值赋给一个事件处理程序属性。如下:

var btn= document.getElementById("myBtn"); 
btn.onclick = function{ //具体代码段 }

注意:此种方法只能添加一个事件处理程序

方法二:通过addEventListener方法。如下:

addEventListener("事件名",事件处理程序,ture/false:在事件捕获/冒泡阶段调用模型)

对应的事件处理程序移除方法:removeEventListener,参数必须相同。

注意:此种方法,以匿名函数添加的事件处理程序无法被移除

此方法可以添加多个事件处理程序

IE事件处理程序

IE+Oprea浏览器

程序作用域为全局作用域,this指向window对象

添加方法:attachEvent("on+事件名",事件处理程序)

移除方法:detachEvent("on+事件名",事件处理程序)

事件对象

在触发某个事件时,会产生一个相应的事件对象,这个对象包含所有与事件相关的信息。如:导致事件的元素、事件的类型等

DOM中的事件对象

对象名:event

常用属性:

type:被触发事件的类型

target:事件的目标

常用方法:

event.preventDefault:取消事件默认行为(前提:cancelable属性值为true)

event.stopPropagation:取消事件的进一步冒泡或捕获

IE中的事件对象

对象名:window.event

常用属性:

type:被触发事件的类型

scrElement:事件的目标

常用方法:

event.cancelBubble(true/false):true->取消事件默认行为
event.returnValue(true/false):false->取消事件的进一步冒泡或捕获

综合以上所述,整理代码写可跨浏览器的事件处理程序(构造EventUtil对象,为其添加可兼容各浏览器的事件处理方法),如下:

/*可跨浏览器的事件处理程序
构造EventUtil对象,为其添加可兼容各浏览器的事件处理方法
*/
var EventUtil = {
  /*添加事件处理程序*/
  addHandler: function (element, type, handler) {
    if (element.addEventListener) {
      addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  },
  /*移除事件处理程序*/
  removeHandler: function (element, type, handler) {
    if (element.removeEventListener) {
      removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      detachEvent("on" + type, handler);
    } else {
      element["on" + type] = null;
    }
  },
  /*获得事件对象*/
  getEvent: function (event) {
    return event ? event : window.event;
  },
  /*获得事件的目标*/
  getTarget: function (event) {
    return event.target || event.scrElement;
  },
  /*取消事件的默认行为*/
  preventDefault: function (event) {
    if (event.preventDefault) {
      event.preventDefault;
    } else {
      event.returValue = false;
    }
  },
  /*阻止事件进一步冒泡*/
  stopPropagation: function (event) {
    if (event.stopPropagation) {
      event.stopPropagation;
    } else {
      event.cancelBubble = true;
    }
  }
};

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 #Javascript
深入理解javascript中的 “this”
Jan 17 #Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 #Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 #Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 #Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 #Javascript
js生成随机数方法和实例
Jan 17 #Javascript
You might like
PHP文件注释标记及规范小结
2012/04/01 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
python实现下载文件的三种方法
2017/02/09 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
数控专业应届生求职信
2013/11/27 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
求职自荐信怎么写
2015/03/04 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python