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 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
python实现udp数据报传输的方法
2014/09/26 Python
简单的Python抓taobao图片爬虫
2014/10/26 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
python的setattr函数实例用法
2020/12/16 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
劳资员岗位职责
2013/11/11 职场文书
大学四年规划书范文
2013/12/27 职场文书
辞职信标准格式
2015/02/27 职场文书
Python入门之基础语法详解
2021/05/11 Python
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python