今天复习下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>
分享到：
相关推荐
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
5. **总结**：事件冒泡和事件捕获是JavaScript事件模型的两个阶段，它们定义了事件如何在DOM树中传播。事件委托则是一种高效利用事件处理的策略，可以降低内存消耗，提高性能，尤其适用于动态添加或删除DOM元素的...
本文将深入探讨JavaScript事件机制，特别是事件的捕获和冒泡阶段。 首先，理解JavaScript事件的基础概念至关重要。事件是用户或浏览器在与网页交互时发生的动作，比如点击按钮、页面加载或滚动等。当这些事件发生时...
JavaScript中的事件处理机制是网页交互的核心，其中包括了两种主要的事件传播模式：事件冒泡（Bubbling）和事件捕获（Cropping）。事件冒泡是指事件从最深的节点开始，然后逐级向上传播到最外层的节点。而事件捕获则...
在JavaScript中，事件处理是网页交互的核心部分，而事件冒泡、事件捕获和事件委托则是JavaScript事件模型中的三个重要概念。理解这三个概念对于优化网页性能和编写高效代码至关重要。 事件冒泡是指事件从最深的节点...
冒泡事件和事件捕获是JavaScript中处理事件传播的两种主要模型，它们定义了事件在DOM树中传播的顺序。在实际的Web开发中，深入理解这两种模型对于正确处理事件，避免潜在的问题至关重要。 冒泡事件是指当一个事件在...
在JavaScript中，有多种事件模型，包括事件冒泡（Bubble Phase）和捕获阶段（Capture Phase）。事件冒泡是最常见的一种，它始于事件目标元素（例如，用户点击的按钮），然后依次经过其所有父元素，直到到达文档的根...
总之，JavaScript的事件处理是构建动态网页的重要手段，熟练掌握事件绑定、事件冒泡、事件捕获和事件执行顺序能帮助开发者编写更高效、更易于维护的代码。通过实践和不断学习，可以更深入地理解和运用这些概念。
事件冒泡和事件捕获是两种不同的事件处理机制，它们决定了事件如何在DOM（Document Object Model）层次结构中传播。了解这两者对于优化事件处理性能和编写高效代码至关重要。 事件冒泡是从最具体的节点（通常是DOM...
事件流主要有三种阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。 事件捕获阶段是从DOM树的根节点开始，沿着树向下传播到目标节点。在这个阶段，事件首先由最外层的父元素接收，然后逐级向下传递，直到到达触发...
JavaScript事件冒泡是Web开发中的一个关键概念，它在网页交互和动态效果中扮演着重要角色。事件冒泡源于浏览器处理事件的方式，当一个事件（如点击、鼠标移动等）在一个元素上触发时，该事件会自底向上沿着DOM树...
事件触发时序问题中的两个重要概念是事件冒泡（event bubbling）和事件捕获（event capturing）。这两个术语描述了事件流（event flow）在DOM树中的传播顺序。 事件冒泡是指当一个元素上的事件被触发后，该事件会...
事件处理有冒泡和捕获两个阶段。默认情况下，事件从最不具体的节点开始（捕获阶段），然后到达最具体的节点（冒泡阶段）。我们可以在添加事件监听器时指定`useCapture`参数为`true`，这样事件会在捕获阶段处理，而...
事件监听涉及的几个核心概念包括事件传播的两种方式：事件捕获和事件冒泡，以及兼容性问题和事件对象的使用。 首先，事件监听器可以通过多种方法添加，包括直接在HTML元素上使用内联属性如onclick，或通过...
谈起JavaScript的 事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。 事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。 事件冒泡阶段：...
事件冒泡、事件捕获和事件委托是JavaScript事件模型中的三个重要概念。 首先，事件捕获是一种事件处理机制，它从DOM树的根节点（window对象）开始，向下遍历到目标元素。这种机制使得事件首先在最不具体的节点（即...
在JavaScript编程中，事件处理是不可或缺的一部分，尤其是事件冒泡（Event Bubbling）机制，它是理解DOM...在实际开发中，结合事件捕获（Event Capturing）和事件冒泡，可以更好地控制事件流，实现更加精细的事件管理。