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

设想这样一种情况

一个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
		};
	}
});

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

时间: 2024-11-08 18:12:13

事件冒泡与捕获&事件委托的相关文章

[JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获.IE浏览器:事件从里向外发生,事件从最精确对象(target)开始触发,然后到最不精确的对象(document)触发,即事件冒泡 Netscape:事件从外向里发生,事件从最不精确的对象(document)开始触发,然后到最精确对象(

事件冒泡与捕获

事件流指的是页面中接收事件的顺序,IE,火狐和chrome浏览器都是事件冒泡,所谓是事件冒泡指的是事件最开始由最具体的元素接收,然后逐级向上传播到不具体的节点.而事件捕获则正好相反,事件捕获是由Netscape提出的,事件冒泡和捕获具体如下图所示: 虽然事件捕获是Netscape唯一支持的事件流模型,但目前IE9,火狐和谷歌也都支持这种事件流模型. 事件冒泡的好处 因为事件具有冒泡机制,因此我们可以利用冒泡的原理,把事件加到父级上,触发执行效果.这样做的好处当然就是提高性能了. 如果说我们可能有

JavaScript事件冒泡与捕获

event.preventDefault();    如果event.cancelable的值为true,可以取消默认事件 event.cancelable;             元素是否可以取消默认事件,true可以取消,false不可以取消,IE8不支持 event.cancelBubble;         true:设置当前事件不冒泡,false:设置当前事件冒泡 event.stopPropagation();  停止当前事件的分发,不论当前事件是在冒泡还是在捕获阶段 事件--怎样

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

设想这样一种情况 一个div里面有个span元素  ,当鼠标单击span时,这个事件算是谁的? div还是span? 准确的说两个都触发了,这种认可大家都允许,事实就是这种, 第二个问题来了,这个事件应该有个先后顺序 ,先触发span还是div? 早期就有两个主流的浏览器厂商各执己见,IE觉得,这个事件首先触发span,然后依次往父节点传递,终于传递到document,(这个过程称为冒泡) 网景浏览器觉得,不论什么事件都首先触发document,然后依次往下传递到span元素,(这个过程称为捕获

JS 事件冒泡、捕获。学习记录

作为一个转行刚到公司的新人,任务不多,这一周任务全部消灭,闲暇的一天也别闲着,悄悄的看起了书.今天写一下JS的事件冒泡.捕获. 也是今天看的内容有点多了,有些消化不了,就随手记录一下.纯属自我理解,如果有不对,还请指导提出,小弟一定改正. 好了,话不多说.那么事件冒泡是什么? 举个例子 ul > li > div > p . 这个时候你点击P,他会一层一层的往上执行,直到最后绑定事件的元素.假如我们绑定事件在ul上,那么点击P,他就会逐级往上走,直到找到绑定事件的ul也会触发事件,那么在

javascript 事件传播与事件冒泡,W3C事件模型

说实话笔者在才工作的时候就听说了什么"事件冒泡",弄了很久才弄个大概,当时理解意思是子级dom元素和父级dom元素都绑定了相同类型的事件,这时如果子级事件触发了父级也会触发,然后这就叫做"事件冒泡".然而,事情要是这么简单的话,相信笔者这时一定已经迎娶了白富美,当上了CEO.坏就坏在后来又听说一个"事件传播" ,尼玛不是"事件冒泡"吗,然后又听说了"W3C事件模型"...到了最后笔者彻底心碎了,只能乖乖的当

事件冒泡机制和事件委派 以及回调的匿名函数参数

1.事件冒泡机制: 事件冒泡机制也就是当一个事件绑定到一个元素上时,如果这个元素不存在或者回调函数返回ture,那么这个事件就会向上冒泡,继续绑定这个元素的父级元素直至document.(如果事件返回return false则不会冒泡) 阻止冒泡:1.事件return false ; 2.evt.stopPropagation(这个evt指此次事件,写在事件匿名回调函数的参数里)例如: $('li').click(function(evt){evt.stopPropagation()}); 2.

JQuery中的事件冒泡和阻止事件的传播行为

之前的这篇博客详细地介绍了javascript中的事件冒泡和事件捕获,以及DOM事件流.现在我们来看下,JQuery框架中的事件冒泡问题,以及如何阻止事件的传播行为. 1.JQuery中的事件绑定,都是属于事件冒泡. 这篇博客介绍了JQuery中绑定事件处理函数的几种方式,从中可以看到:这几种绑定方式,都不允许我们传递事件类型(是事件冒泡,还是事件捕获).而javascript原生提供的addEventListener()则允许我们设置事件的类型. <script> $(function(){

事件冒泡 ,阻止事件冒泡 e.stopPropagation()

<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>冒泡</title> <script src="script/jquery-1.11.0.min.js" type="text/javascript"></script> <script type="text/javascri