javascript基础(9)JS事件(冒泡事件和捕获事件)
日期：2014-05-16 浏览次数：20318 次
javascript基础(九)JS事件(冒泡事件和捕获事件)
今天复习下JS的冒泡事件，如果一个按钮被单击，那么这个按钮就是他的目标.如果已经为这个对象定义好了事件处理程序，那么这个事件就会调用事件处理程序，如果没有定义任何处理程序，或者事件处理程序的返回值为'true'(为'false'将会取消事件),那么这个事件会向这个对象的父级对象传播，进行处理，这个事件会一直在整个对象层次中冒泡，直到他被处理，或者他到达对象层次的最顶层，document对象。而捕获事件是针对非ＩＥ浏览器的
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Content-Type" CONTENT="text/html;charset=utf-8">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="outer">outer
<p id="inner">inner
<input type="button" id="btn" value="button">
</p>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var outer=document.getElementById("outer");
var inner=document.getElementById("inner");
var btn= document.getElementById("btn");
alert(outer);
alert(inner);
alert(btn);
outer.onclick=function(){
alert("click outer");
this.style.color="red";
}
inner.onclick=function(){
this.style.color="blue";
}
btn.onclick=function(){
this.style.color="yellow";
}
//-->
</SCRIPT>
</BODY>
</HTML>
?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> JavaScript中的事件（上） </TITLE>
<META NAME="Content-Type" CONTENT="text/html;charset=utf-8">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="bgDiv" style="height: 200px;width: 200px;background-color:red; display:none;">
</div>
<input type="button" id="btn" value="button" />
<SCRIPT LANGUAGE="JavaScript">
<!--
var bgDiv=document.getElementById("bgDiv");
var btn=document.getElementById("btn");
function stopBubble(e){
if(e&&e.stopPropagation()){
//火狐浏览器阻止冒泡事件
e.stopProgation();
}else{
//IE浏览器阻止冒泡事件
window.event.cancelBubble=true;
}
}
btn.onclick=function(e){
if(bgDiv.style.display=="none"){
alert("button按钮把bgDiv层变为显示状态");
bgDiv.style.display="block";
}else if(bgDiv.style.display!="none"){
alert("button按钮把bgDiv层变为隐藏状态");
bgDiv.style.display="none";
}
stopBubble(e);
}
document.onclick=function(e){
alert("document把bgDiv层变成隐藏状态");
bgDiv.style.display="none";
}
//-->
</SCRIPT>
</BODY>
</HTML>
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
