js事件冒泡和事件捕获

转载：https://www.cnblogs.com/qq9694526/p/5653728.html

1.html

<!--一、事件冒泡和事件捕获-->
<div id="parent">
　　<div id="child" class="child">点击child</div>
</div>				
<!--二、应用案例-->
<ul>
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
	<li>item4</li>
	<li>item5</li>
	<li>item6</li>
</ul>

2.js

<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	
	//一、事件冒泡和事件捕获
		//addEventListener接受三个参数（事件，函数，Boolean）
		//第三个参数为Boolean：true,事件捕获；false,事件冒泡。默认false,即事件冒泡
		
		//1.Boolean为false，此时为冒泡事件
//		document.getElementById("parent").addEventListener("click",function(e){
//          alert("parent事件被触发，"+this.id);
//     });
//      document.getElementById("child").addEventListener("click",function(e){
//          alert("child事件被触发，"+this.id)
//      });
		//首先child事件被触发，child
		//再次parent事件被触发，parent
		//结论：先child，然后parent。事件的触发顺序自内向外，这就是事件冒泡。
		
		//2.Boolean为true，此时为捕获事件
//		document.getElementById("parent").addEventListener("click",function(e){
//          alert("parent事件被触发，"+e.target.id);
//      },true)
//      document.getElementById("child").addEventListener("click",function(e){
//          alert("child事件被触发，"+e.target.id)
//      },true)
		//首先parent事件被触发，parent
		//其次child事件被触发，child
		//结论：先parent,然后child。事件触发顺序变更为自外向内，这就是事件捕获。
	
	
	
	//二、应用案例
	
	
	//1.利用事件冒泡实现(方案一)
//		$("ul").on("mouseover",function(e){
//			console.log(e.target)
//          $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
//     });
   
	//2.常规方法（方案二）
//		$("li").on("mouseover",function(){
//          $(this).css("background-color","#ddd").siblings().css("background-color","white");
//     });
			
	//以上两种都能实现。而且从代码简洁程度上，两者是相若仿佛的。
	//但是，前者少了一个遍历所有li节点的操作，所以在性能上肯定是更优的。
	
	//3.还有就是，如果我们在绑定事件完成后，页面又动态的加载了一些元素……
	//$("<li>item7</li>").appendTo("ul");
	//这时候，第二种方案，由于绑定事件的时候item7还不存在，所以为了效果，我们还要给它再绑定一次事件。而利用冒泡方案由于是给ul绑的事件……
	//高下立判！
	
</script>