5-9 事件对象
本节编程练习不计算学习进度,请电脑登录imooc.com操作

事件对象

既然可以冒泡,相应的也应该可以停止

这里需要利用到事件的特有对象 - 事件对象,事件对象是JavaScript中一个非常重要的对象,用来表示当前事件。event 对象的属性和方法包含了当前事件的状态。

当前事件,是指正在发生的事件;
状态,是与事件有关的性质,如引发事件的 DOM 元素、鼠标的状态、按下的键等等。

event 对象只在事件发生的过程中才有效,事件对象提供了 preventDefault,stopPropagation2 个方法一个停止事件传播,一个传递默认的行为(暂且无视IE),jQuery 提供了个万能的 return false 不仅可以阻止事件冒泡,还可以阻止浏览器的默认行为,还可以减少 IE 系列的 bug。其实就是根据返回的布尔值调用 preventDefault,stopPropagation 方法,下面会提到 e.stopImmediatePropagation 方法不仅阻止了一个事件的冒泡,也把这个元素上的其他绑定事件也阻止了。

浏览器的实现差异:
在 W3C 规范中,event 对象是随事件处理函数传入的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持这种方式。但是对于 IE8.0 及其以下版本,event 对象必须作为 window 对象的一个属性。
在遵循 W3C 规范的浏览器中,event 对象通过事件处理函数的参数传入,event 的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。
特别指出:分析的版本是2.1.1,已经不再兼容 IE6-7-8了,所以部分兼容问题都已经统一,例如:事件绑定的接口,事件对象的获取等等,我们源码分析的重点不在使用,而是设计的思路
注:事件对象具体有些什么方法属性参照 http://www.itxueyuan.org/view/6340.html。

事件对象中我们用的最多的就是 target了,这个是我们的点击对象,别忘记了还有个 currentTarget 这个是事件的绑定对象,有什么区别?

<div id="aaron">
   <div>
     <p>Click me!</p>
   </div>
</div>
var aaron = document.getElementById('aaron')
aaron.addEventListener('click',function(e){
    console.log(this,this == e.currentTarget,e)
},false)

如上结构,currentTarget 是 aaron 的 div 元素 , target 是 p 元素,事件对象是有作用域的 currentTarget 是等于 this 的。
事件对象的基础大家都是知道了,jQuery为了实现统一的事件对象调用与委托的的处理,将事件对象单独重写,这样如果用户做了任何的行为处理 jQuery 内部都能获取到状态值,从而用来处理同一个元素绑定多个模拟事件的判断处理。这也是重写后的一个重要意义。

任务

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script src="http://www.imooc.com/static/lib/jquery/1.9.1/jquery.js" type="text/javascript"></script>
  6. <title>事件对象</title>
  7. </head>
  8. <body>
  9.  
  10. <p>点击测试,委托后事件执行顺序</p>
  11. <div id="aaron" style="border:1px solid #ccc">
  12. <div id='test'>
  13. <ul>
  14. <p>点击p被委托,ul被阻止了,因为内部重写了事件对象</p>
  15. </ul>
  16. </div>
  17. </div>
  18.  
  19.  
  20.  
  21. <script type="text/javascript">
  22.  
  23.  
  24. var aaron = $("#aaron")
  25.  
  26. //同一个元素上绑定不同的事件委托
  27. aaron.on('mousedown','p',function(e){
  28. alert('委托到p触发')
  29. e.stopPropagation()
  30. })
  31.  
  32. aaron.on('mousedown','ul',function(e){
  33. alert('被阻止了')
  34. })
  35.  
  36.  
  37. </script>
  38.  
  39. </body>
  40. </html>
下一节