js事件处理

DOM方法 addEventListener() 和 removeEventListener()是用来分配和删除事件的函数。

这两个方法都需要三个参数,分别为:

1) 事件名称 (String)

2) 要触发的事件处理函数 (Function)

3) 指定事件处理函数的时期或阶段 (boolean)

DOM事件流如图(剪自javascript高级程序设计):

由图可知:捕获过程要先于冒泡过程

支持W3C标准的浏览器:

在添加事件时用addEventListener(event,fn,useCapture)方法,基中第3个参数useCapture是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行。

第三个参数设置为true:就在捕获过程中执行处理函数。

第三个参数设置为false:就在冒泡过程中执行处理函数。

而不兼容W3C的浏览器(IE):

在添加事件时用attachEvent()方法,此方法没有相关设置,不过IE的事件模型默认是在事件冒泡时执行的,也就是在useCapture等于false的时候执行,所以把在处理事件时把useCapture设置为false是比较安全,也实现兼容浏览器的效果。

事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。

事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。

【转载】

http://blog.csdn.net/kongjiea/article/details/30234095  [addEventListener第三个参数作用]

http://blog.csdn.net/kongjiea/article/details/39023505  [js的事件冒泡和事件捕获]

http://blog.csdn.net/kongjiea/article/details/40297785  [javascript打造跨浏览器事件处理机制]

http://blog.csdn.net/kongjiea/article/details/40297651  [js事件详解-js事件封装函数,js跨浏览器事件处理机制]

时间: 2024-10-22 05:40:57

js事件处理的相关文章

js事件处理 —— 详解

对于JS事件处理分为四部分: 1.html事件处理程序 直接添加到HTML结构中 解析:用html处理程序可以直接在button元素里直接调用,但是维护性不是很方便 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 &l

JS.【转】JS事件处理函数中return的作用

1.js事件处理函数中return的作用 - AnswerCard - 博客园.html(https://www.cnblogs.com/answercard/p/5255230.html) 2.网页内容保存: 这里面的return含有一些细节知识: 例如:onClick='return add_onclick()'与 onClick='add_onclick()'的区别 JAVASCRIPT在事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置

Javascrpt 速成篇】 三:js事件处理

ie和chrome,firefox的事件处理,除了函数名字不同,基本大同小异.这样就已chrome为主了,对ie有兴趣的自己去百度.jquery已经处理不同浏览器兼容性问题,推荐使用. 事件处理有两种常用方法,一种通过标签的onXXX属性,第二种是给标签(元素)添加事件监听器,下面已给出实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv=

JS事件处理函数中return false到底是什么东西

在<JS DOM编程艺术>一书中,用return false来阻止事件默认行为,可是js高程3里没有这种用法,那这到底是什么呢. 先看一下知乎的一个解释 就此问题,首先要纠正两个观点: 1. 事件处理方法中 的 return false 并不是终止事件,而是阻止事件宿主的默认行为: 2. 不是在所有的事件处理方法中 return fasle 都能阻止事件宿主的默认行为: 事实上,仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的

js事件处理的3种方式

web前端包含3个技术:html.css.js. html和css的结合是通过style.class.id以及html标签.而js是通过事件来切入html和css的.而浏览器的时间处理有3种方式: 方式一:html事件处理直接将事件函数写在html标签里面如下,如果click事件函数复杂的话直接把函数写在外部onclick直接调用函数名 <input type="button" id="btn" name="btn" onclick=&qu

Js事件处理模型/周期

有3个阶段 1.  捕获阶段:由外向内,记录各级父元素上绑定的事件处理函数---只记录,不触发. 2.  目标触发:优先触发目标元素上的事件处理函数. 3.  冒泡:由内向外,按捕获的顺序的相反的方向,依次执行父元素上的事件处理函数. 过程如下图所示: 如果希望阻止某些冒泡行为,如表单验证失败时,不允许提交,可以使用e.stopPropagation();取消冒泡: 什么时候使用利用冒泡: 都知道,浏览器通过遍历方式查找事件处理函数执行.如果添加的事件监听越多,遍历越慢,网页响应速度越慢,因此

js事件处理函数中return的作用

原文:http://blog.csdn.net/gchonghavefun/article/details/8112830 这里面的return含有一些细节知识: 例如:onClick='return add_onclick()'与 onClick='add_onclick()'的区别 JavaScript在事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置. 而该值决定了当前操作是否继续.当返回的是true时,将继续操作.当返回是false时

js事件处理机制

一.事件处理程序 a.     DOM0级事件处理程序,被认为是元素的方法. var btn=document.getElementById('myBtn'); btn.onclick=function(){ alert(this.id); //'myBtn' }; 在事件处理程序中,通过this访问元素的任何属性和方法. b.    DOM2级事件处理程序 DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener( )和removeEventList

js事件处理、事件对象

事件类型分类: 1 添加在html结构中的事件 <div id="div1" onclick="alert('append click event in html')"> </div> 点击div1之后弹出 append click event in html:其实在html结构中添加的事件也属于dom0级事件. 2 dom0级事件处理 <div id="div1"> </div> <scri