javascript基础(九)JS事件(冒泡事件和捕获事件)

最新推荐文章于 2024-07-19 12:58:53 发布

qinweiping

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量74

点赞数

分类专栏： javascript 文章标签： javascript ViewUI

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

今天复习下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.οnclick=function(){
		  alert("click outer");
		  this.style.color="red";
		}
		inner.οnclick=function(){
		  this.style.color="blue";
		}
		btn.οnclick=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.οnclick=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.οnclick=function(e){
		alert("document把bgDiv层变成隐藏状态");
		bgDiv.style.display="none";
	}
  //-->
  </SCRIPT>
 </BODY>
</HTML>

qinweiping

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript基础(九)JS事件(冒泡事件和捕获事件)

今天复习下JS的冒泡事件，如果一个按钮被单击，那么这个按钮就是他的目标.如果已经为这个对象定义好了事件处理程序，那么这个事件就会调用事件处理程序，如果没有定义任何处理程序，或者事件处理程序的返回值为'true'(为'false'将会取消事件),那么这个事件会向这个对象的父级对象传播，进行处理，这个事件会一直在整个对象层次中冒泡，直到他被处理，或者他到达对象层次的最顶层，document对象。而捕获...
复制链接

扫一扫