事件冒泡与捕获&事件委托

设想这样一种情况   

一个div里面有个span元素  ,当鼠标单击span时,这个事件算是谁的? div还是span?

准确的说两个都触发了,这种认可大家都同意,事实就是这样的,

第二个问题来了,这个事件应该有个先后顺序 ,先触发span还是div?

早期就有两个主流的浏览器厂商各执己见,IE认为,这个事件首先触发span,然后依次往父节点传递,最终传递到document,(这个过程称为冒泡)

网景浏览器认为,任何事件都首先触发document,然后依次往下传递到span元素,(这个过程称为捕获)

按正常人的思维更加倾向与冒泡这种方式,笔者也是这么觉得的,

后来的w3c标准觉得两种方式各有优点,于是综合了两种方式,因此两种都是标准,

就目前来看,IE用户有下降的趋势,标准的w3c浏览器用户在不断增加,但是IE用户毕竟不少,

所以大部分网站开发人员都不会用捕获,因为IE不支持捕获,而其他w3c标准浏览器既支持捕获又支持冒泡,

所以很多人只知道冒泡不知道捕获,就大部分事件处理逻辑来看,冒泡基本已经能够完成,但是捕获有自己的优势,某些相对复杂的事件处理采用冒泡结合捕获会更佳,


以上是个人对事件冒泡以及捕获的理解,下面利用冒泡来看一下事件委托实现原理(采用捕获同样可以实现,道理一样)

根据事件冒泡机制,任何事件都会冒泡到document,事件委托就是把所有事件处理函数绑定到document,根据事件参数判断事件源对象,

判断不同的对象给予不同的处理函数,


举个例子:(jquery方式)

$(document).on("click",function(e){
	var  _this = e.target;     //获取事件源对象
	var  id = $(_this).attr('id');   //获取对象的id
	switch(id)
	{
		case   "btnid"  :  function(){ 
			//do some thing
		} ;  break;
		case   "divid"  :   function(){ 
			//do some thing
		}; break;
		default : function(){ 
			//do some thing  
		};
	}
});



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值