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 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
Vue 处理表单input单行文本框的实例代码
May 09 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 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读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
python switch 实现多分支选择功能
2020/12/21 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
社区八一活动方案
2014/02/03 职场文书
班风学风建设方案
2014/05/06 职场文书
食堂标语大全
2014/06/11 职场文书
机电一体化专业求职信
2014/07/22 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
一年级小学生评语大全
2014/12/25 职场文书
医院消毒隔离制度
2015/08/05 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
windows server2008 开启端口的实现方法
2022/06/25 Servers