所有232 展开类目

浏览器事件的思考 ƕ

2012/11/13
嘘...

不同浏览器下的事件模型

  • 支持W3C标准的浏览器:先捕获在冒泡。在添加事件时用addEventListener(event,fn,useCapture)方法,基中第3个参数useCapture是一个Boolean值,为true,则采用事件捕获,为false,则采用事件冒泡。
  • 不兼容W3C的浏览器(IE):IE只支持事件冒泡,它也不支持addEventListener函数,不过提供了attachEvent()方法来处理事件。
 
看完上文,是否有感觉什么地方不对?没有?那再看看下文。
 

”halt“到底做了什么?

 
当你每次调用”halt“的时候,它实际上做了2件事情:
  • e.preventDefault();//阻止浏览器执行默认行为
  • e.stopPropagation();//取消事件冒泡
 
preventDefault和stopPropagation翻译成原生js后
 
function preventDefault(e) {
//如果提供了事件对象,则这是一个非IE浏览器 
if(e && e.preventDefault) {
  //阻止默认浏览器动作(W3C)
  e.preventDefault();
} else {
  //IE中阻止函数器默认动作的方式 
  window.event.returnValue = false; 
}
return false;
}
 
function stopPropagation(e) {
//如果提供了事件对象,则这是一个非IE浏览器
if(e && e.stopPropagation) {
  //因此它支持W3C的stopPropagation()方法
  e.stopPropagation(); 
} else {
  //否则,我们需要使用IE的方式来取消事件冒泡 
  window.event.cancelBubble = true;
}
return false; 
}
 
不是吧,我写最开始的代码只是想阻止浏览器的默认行为,不需要取消事件冒泡。
 
但是,这样写也没有什么问题啊!(嘴硬,啪啪……)。
 
确实,大多数情况下,这样的代码没有任何问题,那如果我们把这段代码放大到一个大环境中,会出现什么状况
 
 
<div class="post">  
<h2><a href="http://etao.com/page1">Page1</a></h2>  
<div class="content">  
   Teaser text...  
</div>  
</div>  
<div class="post">  
<h2><a href="http://etao.com/page2">Page2</a></h2>  
<div class="content">  
   Teaser text...  
 </div>  
</div>  
 
现在假设我们想要在用户点击文章标题时,将文章动态载入到div.content中(也就是doSomeThing做的事情),
 
哈哈:上文的js代码也还是会执行啊(年轻人太急)。
 
我们顺着这个思路继续,如果我想要在用户点击了一个div.post元素(或者任何一个它的子元素)时,给它加上一个active类,我就需要给div.post绑定click
 
var posts = $('div.post');  
posts.on('click',function () {   
posts.removeClass("active");  
$(this).addClass("active");  
});
 
这个代码就会有时候执行有时候不执行,因为你在点击a的时候取消了事件冒泡。
 
我们把这个代码的执行范围再次放大,产品提了一个需求,要求监听页面上所有的点击情况,一个同学接到需求,开心的在document上用了事件代理,向服务端发送了数据,回头数据一统计,似乎少了什么。回头一看,有人在a标签的点击事件中用了halt。
 
 
其实这就是本文想传递的信息,大多数情况下,当你使用halt时,你其实真正需要的是e.preventDefault(),在你写通用的组件时候这个问题尤其突出。
8 条评论   |   账号登录: è域账号     Ƹ淘宝账号     ǔ新浪微博
泡芙的时光
泡芙的时光 发表于: 2013-04-19 12:38:33
学习了
嘘...
嘘... 发表于: 2013-01-25 17:46:04
一直不知道e.halt()和e.preventDefault()的区别,现在知道了
郑银辉-小哥
郑银辉-小哥 发表于: 2012-11-20 23:55:00
可以直接说重点嘛~~~
嘘...
嘘... 发表于: 2012-11-15 18:04:17
精华在最后一段~~
嘘...
嘘... 发表于: 2012-11-14 14:45:49
果然不是我能看懂的
嘘...
嘘... 发表于: 2012-11-14 09:07:00
神一样的文笔~~~~
嘘...
嘘... 发表于: 2012-11-13 17:14:58
波哥,写的让我这种小菜鸟也看懂了,不容易啊
嘘...
嘘... 发表于: 2012-11-13 17:02:17
V5.
loading...