http://codepen.io/huashiyiqike/pen/qZVdag

addEventListener 默认是冒泡阶段执行，也就是父亲与子都监听时，点击子，子先处理，父亲再处理，这时加stopPropagation()可以阻止父亲的处理事件。设置true反过来,这时加了stopPropagation()可以阻止子的处理事件。

jquery 只支持冒泡。

<html>

<body id="myid2" class="mystyle your">

 <div id="myid"> father

  <div class="2"> son</div>

  </div>

<div id="jmyid"> jqueryfather
<div class="j2"> jqueryson</div>
</div>

<script type="text/javascript">

document.getElementById("myid").addEventListener("click",function(e){alert("father called"); },true);
document.getElementsByClassName("2")[0].addEventListener("click",function(e){alert("son called");e.stopPropagation();},true);
x=document.getElementsByTagName('body')[0];
$("#jmyid").click(function(event){
alert("jquery father called");
event.stopPropagation();
});
$(".j2").click(function(event){
alert("jquery son called");
//event.stopPropagation();
return false;
});



document.write("Body CSS class: " + x.className);
document.write("<br />");
document.write("An alternate way: ");
document.write(document.getElementById('myid').className);


</script>

</body>

</html>


												


											
js 事件捕获与事件冒泡例子的更多相关文章
	

    
						
  1. JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE
		
    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html   ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->   ...
    
		
    2. 
						
  2. js中关于事件捕获与事件冒泡的小实验
		
    1.事件冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div - ...
    
		
    3. 
						
  3. js事件捕获，事件冒泡，事件委托以及DOM事件流
		
    一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...
    
		
    4. 
						
  4. JS事件捕获和事件冒泡
		
    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 14.0px "Helvetica Neue" ...
    
		
    5. 
						
  5. 【JavaScript】事件捕获、事件冒泡与事件委托
		
    2018年12月18日 最近在学习js时,遇到了三个名词:事件捕获.事件冒泡.事件委托. 一.事件捕获和事件冒泡 事件捕获和事件冒泡是为了解决网页中的事件流(事件发生的顺序)而提出的概念. 事件捕获是 ...
    
		
    6. 
						
  6. 【转载】浅谈事件冒泡与事件捕获 - javascript 事件代理
		
    原文:https://segmentfault.com/a/1190000000749838 事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发 ...
    
		
    7. 
						
  7. DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
		
    平时浏览这么多技术文章,如过不去实践.深入弄透它,这个技术点很快就会在脑海里模糊.要加深印象,就得好好过一遍.重要的事情说三遍,重要的知识写一遍. 开发过程中我们都希望使用别人成熟的框架,因为站在巨人 ...
    
		
    8. 
						
  8. javascript -- 事件捕获，事件冒泡
		
    使用js的时候,当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,单击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. 为什么会 ...
    
		
    9. 
						
  9. 事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE
		
    ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->  事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover……)首先发生在document上,然后依次传 ...
    
		
    10. 
						
  10. javascript中的事件冒泡、事件捕获和事件执行顺序
		
    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 通过Anuglar Material串串学客户端开发 - javascript编译和gulpfile.js
			
    Angular Material不仅仅有本身框架的源代码,还有在这个框架上实现的一个应用docs.更为强大的是,这个应用是真正的产品网站:就是它的官网.我有理由相信,这个网站是从源代码直接发布的,从网 ...
    
			
    2. 
						
  2. [游戏学习24] MFC 各种绘图 字体学习
			
    >_<:这里包含字体设置及各种绘图,只要稍微看一下代码就能理解,这里不多介绍 >_<:Hello.h #include<afxwin.h> class CMyApp ...
    
			
    3. 
						
  3. Gradle里配置jetty实现静态资源的热部署
			
    通过Gradle我们可以很方便的使用内置jetty启动我们的web程序,在本地进行调试.但是在使用的过程中,我发现了几个问题,导致本地调试的效率大受影响. 如果使用gradle jettyRun启动j ...
    
			
    4. 
						
  4. Firefox SVG getBBox方法返回'NS_ERROR_FAILURE'错误分析
			
    在SVG中,我们无法给Text元素设置Width和Height属性,因此无法直接获取Text元素的高和宽.如果想要给Text元素添加背景色,最简单的办法就是在Text元素的下面添加Rect,然后给Re ...
    
			
    5. 
						
  5. win系统下nodejs安装及环境配置
			
    第一步:下载安装文件下载nodejs,官网:http://nodejs.org/download/,我这里下载的是node-v0.10.28-x86.msi,如下图: 第二步:安装nodejs下载完成 ...
    
			
    6. 
						
  6. latex数字加粗后变宽
			
    latex的数字默认用的是Times New Roman字体,这个字体有个不优美之处就是加粗后会变宽,如下图所示: 平常倒是也无所谓.昨天在把实验数据整理进表格时,为了凸显每个数据集上各个实验方法的优 ...
    
			
    7. 
						
  7. HTML标签简明学习一
			
    !-- ... -- html注释 浏览器不对其中的内容解析,可以用来调试及书写释意 <!-- 动不动就被注释 --> !DOCTYPE 声明文件类型 一般大写,必须位于文档首行,浏览器根 ...
    
			
    8. 
						
  8. Atitit..组件化事件化的编程模型--(2)---------Web datagridview 服务器端控件的实现原理and总结
			
    Atitit..组件化事件化的编程模型--(2)---------Web datagridview 服务器端控件的实现原理and总结 1. 服务端table控件的几个流程周期 1 1.1. 确认要显示 ...
    
			
    9. 
						
  9. paip.函数式编程方法概述以及总结
			
    paip.函数式编程方法概述以及总结 1     函数式编程:函数式风格..很多命令式语言里支持函数式编程风格 1.1      起源 (图灵机,Lisp机器, 神经网络计算机) 1.2      函 ...
    
			
    10. 
						
  10. IOS设计模式浅析之工厂方法模式(Factory Method)
			
    概述 在软件系统中,经常面临着“某个对象”的创建工作,由于需求的变化,这个对象的具体实现经常面临着剧烈的变化,但是它却拥有比较稳定的接口. 如何隔离出这个易变对象的变化,使得系统中“其它依赖该对象的对 ...
    
			
    11.