JS/javascript冒泡事件的传递

虽然JS的冒泡事件在平时编码中看起来好像不是很常用,但是在使用的一些插件或者组件中一般都是用使用到的,只是被封装到类里面了,以至于我们无需用到,但是我们还是需要去真正的理解冒泡传递的原理的。

以下是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);

		$("#myid2").click(function(event){ 
			alert("body called");
			//event.stopPropagation(); 
		}); 
		$("#jmyid").click(function(event){ 
			alert("jquery father called");
			//event.stopPropagation(); 
		});  
		$(".j2").click(function(event){ 
			alert("jquery son called");
			//event.stopPropagation(); 
			return false;
		});
	</script>
</body>

画面显示文本如下:

father
son
jqueryfather
jqueryson

1.点击【father】会弹出”father called”和”body called”;

2.点击【son】会弹出”father called”和”son called”;虽然在son的事件中添加了 e.stopPropagation(); 阻止冒泡,可是在父元素father添加事件addEventListener中的第二个参数设置了true,所以父元素也会被触发,而且是在son元素之前执行的。

3.点击【jqueryfather】会弹出”jquery father called”和”body called”;

4.点击【jqueryson】会弹出”jquery son called”;其中event.stopPropagation(); 和return false;都可以组织事件冒泡,使父元素的事件不被触发。

 

 

0 Comments

Leave a comment