记录这一路上的坎坷--JavaScript之event

  今天逛博客园偶然间看到一篇关于event对象的文章,个人感觉有个地方写的不对,因此想在此表达下自己的观点。首先大致描述下关于event对象。

event

事件的处理分别经过捕获阶段、目标阶段、事件冒泡阶段这3个阶段。

捕获阶段

在捕获阶段,事件将会从window对象开始向下遍历DOM树来传播(如果注册了事件侦听器则会在捕获阶段执行相应的处理)

目标阶段

在这一阶段中,被事件目标注册的事件侦听器将会被执行。

事件冒泡阶段

在这一阶段,事件的传播方式是从事件目标开始向上遍历DOM树,直至window对象结束。不过,也有一些事件不会经过冒泡阶段(focus)。

在此有两个地方想跟大家分享下:

事件的执行顺序是上文中三个阶段逐一执行(而不是其他文章说的那样如果e.target 跟你绑定的事件目标相同则从目标阶段开始);

另外一点就是大家可能会忽略的地方在一次事件触发的过程中,只有一个触发事件的元素(即e.target是不变的),然而可以有多个执行处理该事件的元素(即有多个e.currentTarget);

第二点其实也是事件代理整个过程的缩略:

所谓的事件代理其实就是通过事件冒泡来实现,整个过程大致如下:

  首先以触发事件的元素为起点,然后不断的循环向上到父节点传播只要这些节点与指点的元素相同那么就执行该事件,一直循环到你委托代理指定的元素(e.currentTarget).

另外关于事件对象还有几个知识点顺便分享给大家:

eventPhase : 用于标识处于事件传播的哪一个阶段;

bubbles:如果处于事件冒泡阶段返回true,否则为false;

cancelable: 如果可以执行preventDefault()方法返回true,否则为false

(以上仅代表个人的想法或者观点,如果有任何值得商榷的地方,欢迎指正)

时间: 2024-10-13 12:22:38

记录这一路上的坎坷--JavaScript之event的相关文章

记录这一路上的坎坷--JavaScript之字符串截取

最近在项目中想尽量少用jquery,多用原生JavaScript以便更好的提高.问题就出在一个简单的index提取.这个index我是通过元素的类名来获取,因此使用element.className.substr(-1,1). 这看似没有问题,不过在ie8及之前的ie版本,获取到的却是类名的第一个字符.这便是substr存在的兼容性问题. 在此总结下关于字符串截取的相关方法(参考http://www.w3school.com.cn/): string.substr(start,length) 返

在javascript中event的target和currentTarget的区别

JavaScript的event对象中 event.target指代的是:触发事件的元素 event.currentTarget指代的是:事件绑定的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div

javascript 火狐event.keyCode不能使用event is not defined

在项目中,登录时需要enter按钮提交页面所以需要监听键盘输出 但是在火狐中不支持 event.code 所以换了中写法 1:form中加入时间传入event <form id="frm" runat="server" onkeypress="onKeyPressBlockNumbers(event)"> 2:监听判断是否为enter按钮. ? 1 2 3 4 5 6 7 8 function onKeyPressBlockNumbe

JavaScript中event的x,clientX,offsetX的区别

JavaScript中event的x,clientX,offsetX的区别 请看下面的文字说明,也就是event中x,clientX,offsetX,screenX的区别: x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置.www.mlybyby.com clientX:相对于客户区域的x坐标位置,不包括滚动条,就是正文区域. offsetx:设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置. screenX:相对于用户屏幕. 同时你可以对比下面代码分析 Cl

学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcElement(触发事件的事件源对象)和attachEvent("onclick",function(){...}); 2. a. 实现拖放(Drag and Drop): 目前支支持IE, 若定制某对象为可拖放对象, 则必须覆盖目标对象的dragenter和dragover事件, 可以用e

【好文收藏】javascript中event对象详解

event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. <HTML> <HEAD><TITLE>Cancels Links</T

JavaScript 键盘event.keyCode值列表大全

JavaScript 键盘event.keyCode值列表大全 event.keyCode值列表大全,对于需要根据键盘按键触发相应事件的朋友需要. 网上收集的KeyCode值方便大家查找: keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 = Shift_L keycode 17 = Control_L keycode 18 = Alt_L ke

火狐和ie下获取javascript 获取event

javascript 获取event 先从一个简单的例子说起,一个简单的button控件如下: <input type='button' name='mybtn' id='mybtn' onclick='myFunc()'/> 然后为其注册事件,这样的情况,怎么在javascript里获取event呢,特别是firefox的情况.请看: <script type='text/javascript'> function myFunc(){ var ev = window.event

javascript中event对象详解

event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. 前端UI资源I分享 <HTML> <HEAD><TITLE>Cancels L