JS event bubbling and event delegate (delegate)

Article Directory

First, the event bubbling
Second, the event delegate (delegate)
Third, the summary

First, the event bubbling

Refers to the upward conduction of events, when the event is triggered on the descendant elements, that the same event ancestor elements will be triggered
If you do not want to happen event bubbling can be canceled by bubbling event object properties

For example:
Renderings:
Here Insert Picture Description
Where the body was his grandfather, green div (I box1) is the father, yellow span (I am a span) is the son of three generations to this tie-click response function
Implementation code

body of code

<body>
	<div id="box1">
		我是box1
		<span id="s1">我是span</span>
	</div>
</body>

CSS code

<style type="text/css">
	#box1{
		width: 200px;
		height: 200px;
		background-color: yellowgreen;
	}
	
	#s1{
		background-color: yellow;
	}
</style>

JS code

<script type="text/javascript">
	
	window.onload = function(){
		
		//为s1绑定一个单击响应函数
		var s1 = document.getElementById("s1");
		s1.onclick=function(){
			alert("我是span单击响应函数");
		}
		
		//为box1绑定一个单击响应函数
		var box1 = document.getElementById("box1");
		box1.onclick=function(){
			alert("我是box1单击响应函数");
		}
		
		//body绑定一个单击响应函数
		document.body.onclick = function(){
			alert("我是body单击响应函数")
		}
	}
</script>

Triggering effect is as follows:
When you click on the son (span), he, his father (div) and his grandfather (body) will trigger the respective response function, which my father empathy

Achieve terminate bubble

To cancel the event object cancelBubble by bubbling property
event.cancelBubble = true;
Such as the termination of his son (span) bubble, that is, it is not my father and grandfather it triggers the click event

The complete code

s1.onclick=function(event){

	//解决浏览器兼容问题
	event=event || window.event;
	alert("我是span单击响应函数");
	
	//取消冒泡
	event.cancelBubble = true;
}

Second, the event delegate (delegate)

What is

It refers to a common ancestor event to unify the binding element
When an event is triggered on future generations, it would have been bubbling to ancestor
Response function to handle events ancestor elements

The following Examples illustrate Sub
Renderings:
Here Insert Picture Description
Add hyperlinks and dynamic binding events

Implementation code
body of code

	<body>
		<button id="btn01">添加超链接</button>
		
		<ul id="u1" style="background-color: yellow;">
			<li ><a href="javascript:;" class="link">超链接一</a></li>
			<li ><a href="javascript:;" class="link">超链接二</a></li>
			<li ><a href="javascript:;" class="link">超链接三</a></li>
		</ul>
	</body>

JS code

<script type="text/javascript">
	window.onload = function(){
		
		var u1= document.getElementById("u1");
		//点击按钮以后添加超链接
		var btn01 = document.getElementById("btn01");
		btn01.onclick=function(){
			
			//创建一个li
			var li = document.createElement("li");
			li.innerHTML="<a href='javascript:;' class='link'>新建超链接</a>";
			
			//将li添加到ul中
			u1.appendChild(li);
		}
		
		u1.onclick = function(event){
			//解决浏览器兼容问题
			event = event || window.event;
			
			/**
			 * target
			 *  -事件对象的target属性表示触发事件的对象
			 *  -ul中包括li、文本及超链接，只有点击超链接触发事件
			 */
			if(event.target.className == "link"){
				alert("我是ul单击响应函数");
			}
		}
	}
</script>

Third, the summary

Event bubbling is the foundation event delegate and event spread, get a good understanding

Business Junshuai -Andy

He published 198 original articles · won praise 94 · views 90000 +

Private letter concerns