Directorio artículo
En primer lugar, el burbujeo de eventos
- Se refiere a la conducción hacia arriba de los acontecimientos, cuando el evento se dispara en los elementos descendientes, que los mismos elementos evento antepasado se activarán
- Si no desea que suceda burbujeo evento se puede cancelar por burbujeo de las propiedades del objeto de evento
Por ejemplo:
representaciones:
Donde el cuerpo era su abuelo, div verde (I box1) es el padre, el período de amarillo (yo soy un palmo) es el hijo de tres generaciones a esta función de respuesta tie-clic
código de implementación
cuerpo del código
<body>
<div id="box1">
我是box1
<span id="s1">我是span</span>
</div>
</body>
código CSS
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
#s1{
background-color: yellow;
}
</style>
código JS
<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>
efecto desencadenante es el siguiente:
Al hacer clic en el hijo (Span), que, a su padre (div) y su abuelo (el cuerpo) se activará la función de respuesta correspondiente, que mi padre empatía
Lograr terminar la burbuja
- Para cancelar la cancelBubble objeto de evento mediante el burbujeo de la propiedad
- event.cancelBubble = true;
- Tales como la terminación de su hijo burbuja (Span), es decir, que no es mi padre y abuelo que desencadena el evento de clic
El código completo
s1.onclick=function(event){
//解决浏览器兼容问题
event=event || window.event;
alert("我是span单击响应函数");
//取消冒泡
event.cancelBubble = true;
}
En segundo lugar, el delegado de eventos (delegado)
lo que es
- Se refiere a un evento ancestro común para unificar el elemento de unión
- Cuando se activa un evento en las generaciones futuras, que habría sido el burbujeo a los antepasados
- función de respuesta a eventos antepasado elementos de mango
Los siguientes ejemplos ilustran Sub
representaciones:
Adición de hipervínculos y eventos dinámicos vinculante
código de implementación
cuerpo del código
<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>
código JS
<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>
En tercer lugar, el resumen
burbujeante evento es el delegado de eventos fundación y difusión de eventos, obtener una buena comprensión
