`

JS中的事件传播和默认事件取消

 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div id="outDiv" style="display:block;width:100px; height:100px;padding:50px;background-color:#060;">
	<div id="inDiv" style="display:block;width:100px; height:100px; background-color:#FFF;"></div>
</div>

<a id="link" href="http://www.jask.cn" target="_blank">Jask</a>

<script>

	//事件传播
	/*
		当事件目标是Window对象或其他一些单独对象时，浏览器简单地通过调用对象上适当的处理程序响应事件，
		当目标对象是文档或文档元素时，大部分事件都会“冒泡”到DOM树根，调用目标的父元素的事件处理程序，然后调用在目标祖父元素上注册的事件处理程序，一直到Domcument对象上，最后到达Window对象。 
		
		注意：focus blur scroll事件除外其它的大部分事件都会冒泡
	*/	
	var outDiv = document.getElementById("outDiv");
	var inDiv = document.getElementById("inDiv");
	var links = document.getElementById("link");
	//第三个参数是false是这个冒泡的执行顺序是从内到外，反之，从外到内执行；
	//DOMContentLoaded 这个相当于load
	window.addEventListener("click",function(){alert("load");},false);	
	inDiv.addEventListener("click",function(){alert("inDiv");},false);
	outDiv.addEventListener("click",function(event){alert("outDiv");		
		//这个是组织向上冒泡的IE8之前的不支持
		//停止向上冒泡执行window中的属性click
		//event.stopPropagation();    //标准 
		//event.cancelBubble = true;  //IE		
	},false);
	
	//取消默认操作，也就是默认事件，在这里是取消了一个a连接属性href的地址，设置了，就取消了打开www.jask.cn的页面，
	//点击这个连接是一个默认打开新面的事件所以是默认操作
	//如 submit 也有他的默认操作
	links.addEventListener("click",function(event){
		event.preventDefault(); //标准
		//event.returnValue = false //IE		
		//return false; //用于处理使用对象属性注册的处理程序 
	},false);
	
	//事件传播和默认操作是二个不同的机制，
	//一个是向上冒泡 一个是执行默认操作
</script>

</body>
</html>

 

分享到：
| JS事件监听总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS传播事件、取消事件默认行为、阻止事件传播详解

    主要介绍了JS传播事件、取消事件默认行为、阻止事件传播,通过事件处理程序的返回值 调用顺序讲解了详细的过程,需要的朋友可以参考下

    JavaScript实现事件的中断传播和行为阻止方法示例

    事件传播 MicroSoft的设计是当事件在元素上触发时，该事件将接着在该节点的父节点触发，...取消事件默认效果： returnValue = false IE 取消事件效果 defaultPrevent() w3c取消事件效果 &lt;div id ='cc'&gt;&lt;/di

    用纯CSS实现禁止鼠标点击事件示例代码

    JavaScript有一个preventDefault方法, 他可用以来取消事件的默认动作。比如取消打开链接，选择文本或拖放等。 复制代码代码如下:event.preventDefault() 该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果...

    JavaScript事件 “事件对象”的注意要点

    在触发DOM上的某个事件时，会产生一个事件对象event。... cancelable: 返回布尔值，指示事件是否可拥可取消的默认动作。 currentTarget: 返回其事件监听器触发该事件的元素。 eventPhase: 返回事件传播的当前阶段。

    理解JavaScript事件对象

    在触发DOM上的某个事件时，会产生一个事件对象event。... cancelable: 返回布尔值，指示事件是否可拥可取消的默认动作。 currentTarget: 返回其事件监听器触发该事件的元素。 eventPhase: 返回事件传播

    精通AngularJS part1

    他曾在Devoxx UK和其他活动中发表过有关AngularJS的演讲，并开办过AngularJS的培训课程。他希望帮助企业更好地利用AngularJS。 目录 序1 第1章Angular之禅7 11邂逅AngularJS7 熟悉框架8 参与AngularJS项目8 ...

    McAfee 8.0 简体中文

    使用此功能可以在执行 JavaScript 和 VBScript 脚本之前对其进行 扫描。脚本扫描程序能够象真正的 Windows 脚本主机组件的代理组件一 样运行。它可以阻止脚本（例如 Internet Explorer 网页脚本）的执 行并对...

    鱼鱼桌面秀 2010 ZOL版

    XDeskShow拥有豪华绚丽的界面和强大的JS/VBS脚本引擎却占用极少的系统资源，是目前最快速和最轻便的桌面widget小工具。它采用插件机制，可以通过下载大量的Widgets小工具来在你的桌面上实现诸如天气预报、世界时钟、...

    计算机应用技术(实用手册)

    图中2部分是DRIVE A和DRIVE B软驱设置，如果没有A或B驱动器，那么就设置NONE驱动器。我们可以在这里选择我们的软驱类型，当然了绝大部分情况中我们不必修改这个设置。 右下方还有系统内存的参数：BASE MEMORY：基本...

    网管教程 从入门到精通软件篇.txt

    网管教程 从入门到精通软件篇 ★一。★详细的xp修复控制台命令和用法!!! 放入xp（2000）的光盘，安装时候选R，修复！ Windows XP（包括 ...JS：javascript源文件 JSP：HTML网页，其中包含有对一个Java servlet...

Magicbox
Global site tag (gtag.js) - Google Analytics