`

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传播事件、取消事件默认行为、阻止事件传播详解

    JavaScript中的事件处理是Web开发...总结来说，理解JavaScript中的事件传播、取消默认行为和阻止事件传播对于编写高效且可控的交互式网页至关重要。熟练掌握这些技巧可以帮助开发者创建出更加灵活和用户友好的Web应用。

    阻止浏览器的默认事件和冒泡

    ### 阻止浏览器的默认事件和冒泡 在网页开发过程中，经常需要处理各种用户交互行为，如点击、拖拽、键盘输入等。这些行为通常由浏览器默认处理，但有时候我们希望对某些操作进行自定义处理，这就涉及到阻止浏览器的...

    阻止事件(取消浏览器对事件的默认行为并阻止其传播)

    在JavaScript中，我们经常需要对用户交互进行控制，例如点击按钮时执行自定义操作而不是触发浏览器的默认行为，或者防止事件从一个元素传播到其他元素。这就涉及到阻止事件的默认行为和阻止事件的传播。本篇文章将...

    在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。

    标题和描述中提到的知识点主要涉及JavaScript中的事件处理和事件机制。这个事件处理函数的特点是它在每个对象上只会执行一次，类似于JavaScript的`addEventListener`方法的第三个参数为`once`时的效果。此外，它还...

    浏览器事件动态注册和取消

    浏览器事件动态注册和取消是Web开发中的重要概念，它涉及到JavaScript和DOM（Document Object Model）交互的核心技术。本文将深入探讨这一主题，帮助你更好地理解和掌握网页交互的机制。 首先，事件是用户与网页...

    js解决事件冲突

    3. **取消事件冒泡**：通过调用事件对象上的`stopPropagation()`方法可以阻止事件继续传播到父节点，从而避免了因事件冒泡导致的多个事件监听器同时触发的问题。 4. **取消默认行为**：使用`preventDefault()`方法...

    js阻止冒泡和默认事件（默认行为）详解

    综上所述，JavaScript中的阻止冒泡和阻止默认行为是非常重要的技术点，它们在处理复杂的事件监听和避免不必要的事件触发时发挥着重要的作用。理解并掌握这些技术对于提升前端开发的交互体验与代码质量具有重要意义。

    jQuery中事件的冒泡和默认行为

    在JavaScript和jQuery中，事件处理是网页交互的核心部分。事件冒泡和默认行为是理解JavaScript事件模型的关键概念。本文将详细探讨这两个概念以及如何在jQuery中控制它们。 **事件的冒泡** 事件冒泡是指当一个事件...

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

    总结一下，JavaScript中的事件处理包括事件的冒泡、捕获和目标传播，通过`event.stopPropagation()`可以中断事件的进一步传播，防止事件到达其他事件监听器。而`event.preventDefault()`可以取消事件的默认行为，如...

    取消Bootstrap的dropdown-menu点击默认关闭事件方法

    请注意，这两种方法都可以达到取消 `dropdown-menu` 默认关闭的效果，但具体选择哪种方法取决于你的应用场景和需求。如果只是简单地阻止一个元素的关闭，使用 `data-stopPropagation` 属性更为简便；如果需要更复杂...

    js中的事件对象解析1

    JavaScript 中的事件对象是编程中不可或缺的部分，它们用于管理和响应用户或系统引发的交互。当在 DOM（文档对象模型）中触发一个事件时，如点击、鼠标移动等，浏览器会生成一个事件对象（event object），这个对象...

    js如何取消事件冒泡

    在JavaScript中，事件冒泡（Event Bubbling）是一种事件处理机制，它描述的是事件从最深的DOM节点开始，然后逐级向上层节点传播事件的过程。例如，如果你点击一个按钮，该点击事件首先会在按钮元素上触发，然后依次...

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

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

    javascript阻止事件冒泡和浏览器的默认行为

    在JavaScript中，事件处理模型分为两种机制：事件冒泡(event bubbling)和事件捕获(event capturing)。事件冒泡是指一个事件在一个元素上触发之后，会按照从内到外的顺序传播到其他元素上，也就是说，内嵌的子元素上...

    JavaScript事件机制

    例如，可以在事件处理函数中阻止事件的默认行为或停止事件的传播。 综上所述，JavaScript的事件机制是前端开发中非常重要的一个方面。理解和掌握事件绑定的不同方式、事件的三要素以及事件流的过程对于编写高效、...

    浅谈javascript事件取消和阻止冒泡

    在处理事件时，有时我们需要阻止事件的默认行为或者避免事件的冒泡，这就是所谓的事件取消和阻止冒泡。 首先，让我们来理解什么是事件取消。事件取消的目标是防止浏览器执行与特定事件相关的默认行为。例如，当用户...

    jquery取消事件冒泡的三种方法(推荐)

    在jQuery事件处理函数中直接返回`false`是一种最简单的方式来同时阻止事件的默认行为和事件的冒泡传播。示例如下： ```javascript $("form").submit(function(){ return false; }); ``` 这段代码会阻止表单的...

    JS中双击和单击事件冲突的解决方法

    在JavaScript编程中，单击（click）和双击（dblclick）事件是常见的用户交互触发的事件。然而，当这两个事件同时应用于同一个元素时，可能会出现冲突，导致双击事件被误触发为两次单击事件。这个问题在使用某些库如...

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