开发者社区> 行者武松> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaScript之事件处理详解

简介:
+关注继续查看

一.事件传播机制

客户端 JavaScript程序(就是浏览器啦)采用了异步事件驱动编程模型。当文档、浏览器、元素或与之相关的对象发生某些有趣的事情时,Web浏览器就会产 生事件(event)。如果JavaScript应用程序关注特定类型的事件,那么它可以注册当这类事件发生时要调用的一个或多个函数。当然了,这种风格 并非Web编程独有,所有使用图形用户界面的应用程序都采用了它。

既然要详解事件处理,那我们先从几个基础概念说起吧:

①事件类型(event type):是一个用来说明发生什么类型事件的字符串。例如,“mousemove”表示用户移动鼠标,“keydown”表示键盘上某个键被按下。事件类型只是一个字符串,有时候又称之为事件名字(event name);

②事件目标(event target):是发生事件或与之相关的对象。Window、Document和Element对象是最常见的事件目标。当然,AJAX中的XMLHttpRequest对象也是一个事件目标;

③事件处理程序(event handler):是处理或响应事件的函数,它也叫事件监听程序(event listener)。应用程序通过指明事件类型和事件目标,在Web浏览器中注册它们的事件处理函数。

④事 件对象(event object):是与特定事件相关且包含有关该事件详细信息的对象。事件对象作为参数传递给事件处理函数(但是在IE8以及其之前版本中,全局变量 event才是事件对象)。事件对象都有用来指定事件类型(event type)的type属性和指定事件目标(event target)的target属性(但是在IE8以及其之前版本中,用的是srcElement而非target)。当然,不同类型的事件还会为其相关事 件对象定义一些其他的独有属性。例如,鼠标事件的相关对象会包含鼠标指针的坐标,而键盘事件的相关对象会包含按下的键和辅助键的详细信息。

以上说完 了四个基本概念。那么问题来了——如果在一个web页面上用鼠标点击一个元素a的某一子元素b时,应该先执行子元素b注册的事件处理程序还是先执行元素a 注册的事件处理程序呢(假设元素a和它的子元素b都有注册事件处理程序)?身为读者的你是否想过这个问题呢?

这个问题就涉及到浏览器中的事件传播(event propagation)机制。相信大家都听说过事件冒泡(event bubble)和事件捕获(event capturing)吧!没错,它们就是浏览器中的事件传播机制。无图无真相,没有配图?那怎么阔以:

看了图之 后相信你已经大概理解了浏览器中的事件传播机制了:当一个事件发生时,它会先从浏览器顶级对象Window一路向下传递,一直传递到触发这个事件的那个元 素,这也就是事件捕获过程。然而,一切并没有结束,事件又从这个元素一路向上传递到Window对象,这也就是事件冒泡过程(但是在IE8以及其之前版本 中,事件模型并未定义捕获过程,只有冒泡过程)。

所以,关于上面的问题,还得看元素a注册的事件处理程序是在捕获过程还是在冒泡过程了。那么到底什么是在捕获过程注册事件处理程序,在冒泡过程注册事件处理程序又是怎么做的呢?这就得好好说说几种注册事件处理程序的方式了:

1. 设置HTML标签属性为事件处理程序

文档元素的事件处理程序属性,其名字由“on”后面跟着事件名组成,例如:onclick、onmouseover。当然了,这种形式只能为DOM元素注册事件处理程序。实例:


  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  5.     <title>test</title> 
  6.     <style type="text/css"
  7.         #div1{width: 300px; height: 300px; background: red; overflow:hidden;} 
  8.         #div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;} 
  9.         #div3{margin:50px auto; width: 100px; height: 100px; background: blue;} 
  10.     </style> 
  11. </head> 
  12. <body> 
  13.     <div id="div1" onClick="console.log('div1');">div1 
  14.         <div id="div2" oNClick="console.log('div2');">div2 
  15.             <div id="div3" onclick="console.log('div3');" onclick="console.log('div3333');">div3 
  16.             </div> 
  17.         </div> 
  18.      </div> 
  19. <script type="text/javascript"
  20. </script> 
  21. </body> 
  22. </html> 

结果(鼠标点击div3区域后):

从结果中可以看出:

①因为HTML里面不区分大小写,所以这里事件处理程序属性名大写、小写、大小混写均可,属性值就是相应事件处理程序的JavaScript代码;

②若给同一元素写多个onclick事件处理属性,浏览器只执行第一个onclick里面的代码,后面的会被忽略;

③这种形式是在事件冒泡过程中注册事件处理程序的;

2.设置JavaScript对象属性为事件处理程序

可以通过设置某一事件目标的事件处理程序属性来为其注册相应的事件处理程序。事件处理程序属性名字由“on”后面跟着事件名组成,例如:onclick、onmouseover。实例:


  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  5.     <title>test</title> 
  6.     <style type="text/css"
  7.         #div1{width: 300px; height: 300px; background: red; overflow:hidden;} 
  8.         #div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;} 
  9.         #div3{margin:50px auto; width: 100px; height: 100px; background: blue;} 
  10.     </style> 
  11. </head> 
  12. <body> 
  13.     <div id="div1">div1 
  14.         <div id="div2">div2 
  15.             <div id="div3">div3 
  16.             </div> 
  17.         </div> 
  18.     </div> 
  19. <script type="text/javascript"
  20.     var div1 = document.getElementById('div1'); 
  21.     var div2 = document.getElementById('div2'); 
  22.     var div3 = document.getElementById('div3'); 
  23. div1.onclick = function(){ 
  24. console.log('div1'); 
  25. }; 
  26. div2.onclick = function(){ 
  27. console.log('div2'); 
  28. }; 
  29. div3.onclick = function(){ 
  30. console.log('div3'); 
  31. }; 
  32. div1.onclick = function(){ 
  33. console.log('div11111'); 
  34. }; 
  35.  
  36. div1.onClick = function(){ 
  37. console.log('DIV11111'); 
  38. }; 
  39.  
  40. </script> 
  41. </body> 
  42. </html> 

结果(鼠标点击div3区域后):

 从结果中可以看出:

①因为JavaScript是严格区分大小写的,所以,这种形式下属性名只能按规定小写;

②若给同一元素对象写多个onclick事件处理属性,后面写的会覆盖前面的(ps:这就是在修改一个对象属性的值,属性的值是唯一确定的);

③这种形式也是在事件冒泡过程中注册事件处理程序的;

3.addEventListener()

前两种方式出现在Web初期,众多浏览器都有实现。而addEventListener()方法是标准事件模型中定义的。任何能成为事件目标的对象—— 这些对象包括Window对象、Document对象和所有文档元素等——都定义了一个名叫addEventListener()的方法,使用这个方法可 以为事件目标注册事件处理程序。addEventListener()接受三个参数:第一个参数是要注册处理程序的事件类型,其值是字符串,但并不包括前 缀“on”;第二个参数是指当指定类型的事件发生时应该调用的函数;第三个参数是布尔值,其可以忽略(某些旧的浏览器上不能忽略这个参数),默认值为 false。这种情况是在事件冒泡过程中注册事件处理程序。当其为true时,就是在事件捕获过程中注册事件处理程序。实例:


  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  5. <title>test</title> 
  6. <style type="text/css"
  7. #div1{width: 300px; height: 300px; background: red; overflow:hidden;} 
  8. #div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;} 
  9. #div3{margin:50px auto; width: 100px; height: 100px; background: blue;} 
  10. </style> 
  11. </head> 
  12. <body> 
  13. <div id="div1">div1 
  14. <div id="div2">div2 
  15. <div id="div3">div3 
  16. </div> 
  17. </div> 
  18. </div> 
  19. <script type="text/javascript"
  20. var div1 = document.getElementById('div1'); 
  21. var div2 = document.getElementById('div2'); 
  22. var div3 = document.getElementById('div3'); 
  23. div1.addEventListener('click', function(){ console.log('div1-bubble'); }, false); 
  24. div2.addEventListener('click', function(){ console.log('div2-bubble'); }, false); 
  25. div3.addEventListener('click', function(){ console.log('div3-bubble'); }, false); 
  26. div3.addEventListener('click', function(){ console.log('div3-bubble222'); }, false); 
  27. div1.addEventListener('click', function(){ console.log('div1-capturing'); }, true); 
  28. div2.addEventListener('click', function(){ console.log('div2-capturing'); }, true); 
  29. div3.addEventListener('click', function(){ console.log('div3-capturing'); }, true); 
  30. </script> 
  31. </body> 
  32. </html>

结果(鼠标点击div3区域后):

从结果中可以看出:

①addEventListener()第三个参数的作用正如上面所说;

②通过addEventListener()方法给同一对象注册多个同类型的事件,并不会发生忽略或覆盖,而是会按顺序依次执行;

相对addEventListener()的是removeEventListener()方法,它同样有三个参数,前两个参数自然跟 addEventListener()的意义一样,而第三个参数也只需跟相应的addEventListener()的第三个参数保持一致即可,同样可以 省略,默认值为false。它表示从对象中删除某个事件处理函数。实例:


  1. div1.addEventListener('click', div1BubbleFun, false); 
  2. div1.removeEventListener('click', div1BubbleFun, false); 
  3. function div1BubbleFun(){ 
  4.     console.log('div1-bubble'); 

4.attachEvent()

   但是,IE8以及其之前版本的浏览器并不支持addEventListener()和removeEventListener()。相应的,IE定义了 类似的方法attachEvent()和detachEvent()。因为IE8以及其之前版本浏览器也不支持事件捕获,所以attachEvent() 并不能注册捕获过程中的事件处理函数,因此attachEvent()和detachEvent()要求只有两个参数:事件类型和事件处理函数。而且,它 们的第一个参数使用了带“on”前缀的事件处理程序属性名。实例:


  1. var div1 = document.getElementById('div1'); 
  2. div1.attachEvent('onclick', div1BubbleFun); 
  3. function div1BubbleFun(){ 
  4. console.log('div1-bubble'); 

相应的,从对象上删除事件处理程序函数使用detachEvent()。例如:

div1.detachEvent('onclick', div1BubbleFun);

到此为止,我们已经说了浏览器中事件传播机制以及各种注册事件处理程序的方法。下面我们就再说说事件处理程序调用时的一些问题吧!

二.事件处理程序的调用

1.事件处理程序的参数:正 如前面所说,通常事件对象作为参数传递给事件处理函数,但IE8以及其之前版本的浏览器中全局变量event才是事件对象。所以,我们在写相关代码时应该 注意兼容性问题。实例(给页面上id为div1的元素添加点击事件,当点击该元素时在控制台输出事件类型和被点击元素本身):


  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  5.     <title>test</title> 
  6.     <style type="text/css"
  7.         #div1{width: 300px; height: 300px; background: red; overflow: hidden;} 
  8.     </style> </head> <body> <div id="div1">div1</div> <script type="text/javascript"> var div1 = document.getElementById('div1'); if(div1.addEventListener){ div1.addEventListener('click', div1Fun, false); }else if(div1.attachEvent){ div1.attachEvent('onclick', div1Fun); } function div1Fun(event){ event = event || window.event; var target = event.target || event.srcElement; 
  9.             console.log(event.type); 
  10.             console.log(target); 
  11.         } 
  12.     </script> 
  13. </body> 
  14. </html> 

2.事件处理程序的运行环境:关于事件处理程序的运行环境,也就是在事件处理程序中调用上下文(this值)的指向问题,可以看下面四个实例。
实例一:


  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  5.     <title>test</title> 
  6.     <style type="text/css"
  7.         #div1{width: 300px; height: 300px; background: red; overflow: hidden;} 
  8.     </style> 
  9. </head> 
  10. <body> 
  11.     <div id="div1" onclick="console.log('html:'); console.log(this);">div1</div> 
  12.     <script type="text/javascript"
  13.     </script> 
  14. </body> 
  15. </html>

结果一:

从结果可以看出:

①第一种方法事件处理程序中this指向这个元素本身;

实例二:


  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  5.     <title>test</title> 
  6.     <style type="text/css"
  7.         #div1{width: 300px; height: 300px; background: red; overflow: hidden;} 
  8.     </style> </head> <body> <div id="div1" onclick="console.log('html:'); console.log(this);">div1</div> <script type="text/javascript"> var div1 = document.getElementById('div1'); div1.onclick = function(){ console.log('div1.onclick:'); console.log(this); 
  9.         }; 
  10.     </script> 
  11. </body> 
  12. </html> 

结果二:

从结果可以看出:

①第二种方法事件处理程序中this也指向这个元素本身;

②存在第二种方法时,它会覆盖第一种方法注册的事件处理程序;

实例三:


  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  5.     <title>test</title> 
  6.     <style type="text/css"
  7.         #div1{width: 300px; height: 300px; background: red; overflow: hidden;} 
  8.     </style> </head> <body> <div id="div1" onclick="console.log('html:'); console.log(this);">div1</div> <script type="text/javascript"> var div1 = document.getElementById('div1'); div1.onclick = function(){ console.log('div1.onclick:'); console.log(this); }; div1.addEventListener('click', function(){ console.log('div1.addEventListener:'); console.log(this); }, false); 
  9.     </script> 
  10. </body> 
  11. </html> 

结果三:

从结果可以看出:

①第三种方法事件处理程序中this也指向这个元素本身;

②第三种方法并不会覆盖第一种或第二种方法注册的事件处理程序;

实例四:


  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  5.     <title>test</title> 
  6.     <style type="text/css"
  7.         #div1{width: 300px; height: 300px; background: red; overflow: hidden;} 
  8.     </style> </head> <body> <div id="div1" onclick="console.log('html:'); console.log(this);">div1</div> <script type="text/javascript"> var div1 = document.getElementById('div1'); div1.onclick = function(){ console.log('div1.onclick:'); console.log(this); }; div1.attachEvent('onclick', function(){ console.log('div1.attachEvent:'); console.log(this === window); 
  9.         }); 
  10.         
  11.     </script> 
  12. </body> 
  13. </html>

结果四:

从结果可以看出:

①第四种方法事件处理程序中this指向全局对象Window;

②第四种方法也不会覆盖第一种或第二种方法注册的事件处理程序;

3.事件处理程序的调用顺序:多个事件处理程序调用规则如下:

①通过HTML属性注册的处理程序和通过设置对象属性的处理程序一直优先调用;

②使用addEventListener()注册的处理程序按照它们的注册顺序依次调用;

③使用attachEvent()注册的处理程序可能按照任何顺序调用,所以代码不应该依赖于调用顺序;

4.事件取消:

①取消事 件的浏览器默认操作(比如点击超链接元素会自动发生页面跳转的默认操作):如果使用前两种方法注册事件处理程序,可以在处理程序中添加返回值false来 取消事件的浏览器默认操作。在支持addEventListener()的浏览器中,也可以通过调用事件对象的preventDefault()方法取消 事件的默认操作。至于IE8及其之前的浏览器可以通过设置事件对象的returnValue属性为false来取消事件的默认操作。参考代码:


  1. function cancelHandler(event){ 
  2.     var event = event || window.event; 
  3.     if(event.preventDefault){ 
  4.         event.preventDefault(); 
  5.     } 
  6.     if(event.returnValue){ 
  7.         event.returnValue = false
  8.     } 
  9.     return false

②取消事 件传播:在支持addEventListener()的浏览器中,可以调用事件对象的一个stopPropagation()方法阻止事件的继续传播,它 能工作在事件传播期间的任何阶段(捕获期阶段、事件目标本身、冒泡阶段);但是在IE8以及其之前版本的浏览器中并不支持 stopPropagation()方法,而且这些浏览器也不支持事件传播的捕获阶段,相应的,IE事件对象有一个cancelBubble属性,设置这 个属性为true能阻止事件进一步传播(即阻止其冒泡)。参考代码(阻止发生在div3区域的点击事件冒泡到div2和div1):


  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  5.     <title>test</title> 
  6.     <style type="text/css"
  7.         #div1{width: 300px; height: 300px; background: red; overflow:hidden;} 
  8.         #div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;} 
  9.         #div3{margin:50px auto; width: 100px; height: 100px; background: blue;} 
  10.     </style> </head> <body> <div id="div1">div1 <div id="div2">div2 <div id="div3">div3 </div> </div> </div> <script type="text/javascript"> var div1 = document.getElementById('div1'); var div2 = document.getElementById('div2'); var div3 = document.getElementById('div3');  div1.onclick = function(){ console.log('div1');  };  div2.onclick = function(){ console.log('div2');  };    div3.onclick = function(event){ stopEventPropagation(event); console.log('div3');  }; function stopEventPropagation(event){ var event = event || window.event; if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true
  11.             } 
  12.         } 
  13.     </script> 
  14. </body> 
  15. </html>



作者:clearbug

来源:51CTO

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
javascript事件处理在IE和FireFox中的区别
    如果在使用javascript的时候涉及到event处理,就需要知道event在不同的浏览器中的差异,因为javascript的事件模型有三种,它们分别是NN4、IE4+和W3C/Safari;这也造成了在不同的浏览器中处理event的差异,这里结合一些零碎的代码来说明如何做到event在IE4+和Firefox下的正常工作。
922 0
JavaScript实现的网页放大镜效果
今天在观看视频学习的时候,学到了一个小技巧。就拿过来与大家进行分享一下啦。 实现的原理 分析需求:需要两张图,一大一小。然后根据鼠标的动作显示出不同的区域块的图像。 核心:鼠标事件的获取和处理。
1249 0
用JavaScript实现网页动态水印
原文:用JavaScript实现网页动态水印 1.基本原理 页面加载后,通过javascript创建页面元素div,并在div元素中创建文本节点,展示水印内容 设置div元素样式,将其zIndex设置一个较高的值,并设置透明度,实现浮在页面的水印效果 其核心逻辑如下所示 var mask_div = document.
1053 0
Asp.net+Xml+js实现无线级下拉菜单
地址如下:http://xucanzhao.cnblogs.com/archive/2005/09/01/228012.htmlAsp.net+Xml+js实现无线级下拉菜单
570 0
当前页居中分页效果的JS实现
function show_page(cur_pc){    var cp=cur_pc;    //curent page count    var tp=this.p;    //total page count    var sp=this.
744 0
Javascript实现网页上的多级菜单(竖着)
使用方法:1,包含menu.js和menu.css 2,用创建主菜单类   main = new MainMenu(10,50,"My Menu");这里,MainMenu的前两个参数表示其左上角位置坐标,前者为left,后者为top。第三个参数为菜单标题。之后用MenuItem类建立菜单项MenuItem的源型如下:   function MenuItem(_parent,_caption
1098 0
JS+DIV实现自定义Title的显示方式
     自定义的title显示方式一直在华夏用,当你的鼠标悬停在带有提示的链接上时会有自定义的显示内容出现,显示的内容支持html代码,但是这个效果不支持firefox及其他浏览器,最近对之进行了改进,终于兼容了FF,Safari。代码如下:   var qTipTag = "a"; //Which tag do you want to qTip-ize? Keep it lowerc
1054 0
+关注
行者武松
杀人者,打虎武松也。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript异步编程
立即下载
Javascript中的函数
立即下载
JavaScript 语言在引擎级别的执行过程
立即下载