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

如何理解事件?

JavaScript与HTML之间的交互就是通过事件实现的。
事件:用户或浏览器自身执行的某种动作,换言之,文档或浏览器发生的一些特定的交互瞬间。
事件处理程序:又称事件侦听器,事件发生时执行的代码段。


事件流

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

两种基本事件模型

  1. 事件冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
  2. 事件捕获:事件从最不精确的对象(document 对象)开始触发,然后到最精确。

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

标准DOM事件流

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

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

IE事件流

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


事件处理程序绑定方式

标准DOM事件处理程序

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

  1. 方法一:将函数值赋给一个事件处理程序属性。如下
 var btn=document.getElementById("myBtn");
btn.onclick=function(){
//具体代码段
}

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

  1. 方法二:通过addEventListener()方法。如下
addEventListener("事件名",事件处理程序,ture/false:在事件捕获/冒泡阶段调用模型)

对应的事件处理程序移除方法:removeEventListener(),参数必须相同。
注意:此种方法,以匿名函数添加的事件处理程序无法被移除
此方法可以添加多个事件处理程序

IE事件处理程序

IE+Oprea浏览器

程序作用域为全局作用域,this指向window对象
添加方法:attachEvent(“on+事件名”,事件处理程序)
移除方法:detachEvent(“on+事件名”,事件处理程序)


事件对象

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

标准DOM中的事件对象

  1. 对象名:event
  2. 常用属性:
    • type:被触发事件的类型
    • target:事件的目标
  3. 常用方法:
    • event.preventDefault():取消事件默认行为(前提:cancelable属性值为true)
    • event.stopPropagation():取消事件的进一步冒泡或捕获

IE中的事件对象

  1. 对象名:window.event
  2. 常用属性:
    • type:被触发事件的类型
    • scrElement:事件的目标
  3. 常用方法:
    • event.cancelBubble(true/false):true->取消事件默认行为
    • event.returnValue(true/false):false->取消事件的进一步冒泡或捕获

可跨浏览器的事件处理程序

构造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——事件机制的更多相关文章

  1. 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  2. Javascript事件机制兼容性解决方案

    本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...

  3. 【探讨】javascript事件机制底层实现原理

    前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...

  4. JavaScript事件机制——细思极恐

    JavaScript事件机制,也有让人深思的东西.在一开始未深入了解,我头脑里有几个问题发出: 1. 自下而上(冒泡)事件怎么写,自上而下(捕获)又是怎么写? 2. 捕获型和冒泡型同时设置,谁生效? ...

  5. 重温javascript事件机制

    以前用过一段时间的jquery感觉太方便,太强大了,各种动画效果,dom事件.创建节点.遍历.控件及UI库,应有尽有:开发文档也很多,网上讨论的问题更是甚多,种种迹象表明jquery是一个出色的jav ...

  6. [解惑]JavaScript事件机制

    群里童鞋问到关于事件传播的一个问题:“事件捕获的时候,阻止冒泡,事件到达目标之后,还会冒泡吗?”. 初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会 ...

  7. 总结JavaScript事件机制

    JavaScript事件模型 在各种浏览器中存在三种事件模型: 原始事件模型 , DOM2事件模型 , IE事件模型. 其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE ...

  8. javascript事件机制

    ① javascript绑定事件的方式 http://blog.iderzheng.com/dom-javascript-event-binding-comparison/ ② javascript事 ...

  9. 对JavaScript事件机制的一点理解

    JavaScript通过事件机制实现了异步操作,这种异步操作可以使CPU可以在IO任务的等待中被释放出来处理其他任务,等待IO结束再去处理这个任务.这个是一个基本的事件机制. 那么是不是说事件从监听到 ...

随机推荐

  1. 栈(stack)信息

    栈在JVM虚拟机中是线程的一块私有空间,比如存储函数的调用信息.局部变量等 特性 先进后出和后进先出即FIFO 借用网络的一个图,感觉看完就可以了解了 最先调用的函数压入栈低,最后压入得函数在栈顶,函 ...

  2. Android开发中代码下面出现波浪线问题

    在Android Studio中写代码时,经常会在一个英文单词的下面出现波浪线,这是因为系统检测到你的这个英文单词不符合规范,如下所示: 解决办法:选中这个单词,点击鼠标右键,点击:Spelling ...

  3. Android java.lang.RuntimeException: Unable to instantiate activity ComponentInfo 特殊异常

    本来是不想写的,因为这个异常太常见了,而且也容易处理.但是还是决定记录一下,因为之前遇到过,没留心,今天又遇到了,苦逼了,想了好大一会儿才想起来. 通常容易找的就不写了,今天写个特殊的. 现象:当你在 ...

  4. MVC 5限制所有HTTP请求必须是POST方式

    今天有位同事,提出了这样一个问题,他想限制所有MVC接收到的HTTP请求必须是POST方式. 接下来在下面的内容中,将我想到的方式分享给大家,如果大家有其它的方式,请留言. 一.HttpPostAtt ...

  5. 随笔一个dom节点绑定事件

    以下利用jquery说明: js中,给一个dom节点绑定事件再平常不过了.这里说下,如果dom经常发生变化的话,给这个dom绑定事件的情况. 比如代码如下: li的节点,绑定了事件:点击会打出来里头的 ...

  6. java读取写入文件

    先来看一下java写入文件 public static void readTxt(String value) throws IOException { FileWriter fw = null; tr ...

  7. spring boot配置统一异常处理

    基于@ControllerAdvice的统一异常处理 >.这里ServerException是我自定义的异常,和普通Exception分开处理 >.这里的RequestResult是我自定 ...

  8. [Oracle]如何查看 10046 trace 中的 tim= ... 的具体时刻

    可以在  Linux 下,用下列方式: 如10046 trace 文件中如果有如下的内容:... tim = 1503032923 可以用 date 命令加 option 来看它的时刻: date - ...

  9. 渐进式 JavaScript 框架--Vue

      前  言   灵活 不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩. 高效 20kB min+gzip 运行大小超快虚拟 DOM 最省心的优化 1 计算属性 计算属性关键词: comp ...

  10. Ceph分布式存储集群-硬件选择

    在规划Ceph分布式存储集群环境的时候,对硬件的选择很重要,这关乎整个Ceph集群的性能,下面梳理到一些硬件的选择标准,可供参考: 1)CPU选择Ceph metadata server会动态的重新分 ...