Article Directory
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:
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:
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