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 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
javascript工具库代码
Mar 29 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
Javascript模拟实现new原理解析
Mar 03 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模板引擎SMARTY
2006/10/09 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
jquery append与appendTo方法比较
2017/05/24 jQuery
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
web.py获取上传文件名的正确方法
2014/08/26 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
python and or用法详解
2019/06/26 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
详解Python多线程下的list
2020/07/03 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
String和StringBuffer的区别
2015/08/13 面试题
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
促销活动总结范文
2014/04/30 职场文书
教师教学评估方案
2014/05/09 职场文书
服装设计专业自荐信
2014/06/17 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
公民授权委托书
2014/10/15 职场文书
爱情保证书
2015/01/17 职场文书
论语读书笔记
2015/06/26 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
cypress测试本地web应用
2022/06/01 Javascript