<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript事件冒泡实例一</title>
<style type="text/css">
#box {width:200px; height:100px; border:2px solid blue}
#box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:blue; cursor:move}
#box h5 a {text-decoration:none; color:#FFF}
</style>
</head>
<body>
<div id="box">
<h5 onmousedown="startDrag();"><a onmousedown="closeBox(event);" href="javascript:void(0);">×</a></h5>
<div id="testInfo"></div>
</div>
<script type="text/javascript">
function startDrag()
{
document.getElementById('testInfo').innerHTML += 'startDrag<br/>';
}
function closeBox(e)
{
document.getElementById('testInfo').innerHTML += 'closeBox<br/>';
stopBubble(e);
}
function stopBubble(e)
{
if (e && e.stopPropagation)
{
e.stopPropagation();
alert('a');
}
else
{
window.event.cancelBubble=true;
alert('b');
}
}
</script>
</body>
</html>
分享到：
相关推荐
JavaScript中的事件处理机制包含两种模型：事件捕获与事件冒泡。 事件冒泡，顾名思义，是指事件像气泡一样从最内层的元素向上层元素传播的过程。当页面上的一个元素被点击时，不仅该元素上的事件处理器会被触发，其...
本文实例讲述了JavaScript事件冒泡与事件捕获。分享给大家供大家参考，具体如下： 1、事件冒泡 在一个对象上触发某类事件，如onclick事件等，在其祖先节点上也会依次触发该事件。 <body onclick=alert('body...
JavaScript事件冒泡是DOM（文档对象模型）中事件处理的核心机制之一，它描述了事件从最深的DOM节点开始触发，然后逐级向上层节点传播的过程。在大型的Web交互项目，尤其是WebGame中，对事件冒泡的精确控制至关重要，...
在给出的实例中，作者分享了一个关于JavaScript事件冒泡的修正版本。原例子可能使用了jQuery的`.live()`方法，但`.live()`已被弃用，取而代之的是`.on()`。`.live()`的一个特性是它自动阻止了事件冒泡，因此无法观察...
这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 DOM事件流（event flow ）存在三个阶段：事件捕获阶段...
在JavaScript编程中，事件处理是不可或缺的一部分，尤其是事件冒泡（Event Bubbling）机制，它是理解DOM（Document Object Model）事件处理的关键概念之一。事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次...
例如，`addEventListener()`用于绑定事件处理函数，`event.preventDefault()`阻止默认行为，`event.stopPropagation()`阻止事件冒泡。 3. **动画效果**：JavaScript可以创建各种动态效果，如滑动、淡入淡出、旋转等...
5. **事件处理**：JavaScript通过事件监听和事件冒泡机制实现用户交互，如click、mouseover、mouseout、keydown等事件的处理。 6. **DOM操作**：Document Object Model (DOM)是HTML和XML文档的编程接口，JavaScript...
冒泡事件和事件捕获是JavaScript中处理事件传播的两种主要模型，它们定义了事件在DOM树中传播的顺序。在实际的Web开发中，深入理解这两种模型对于正确处理事件，避免潜在的问题至关重要。 冒泡事件是指当一个事件在...
- 事件冒泡和捕获：理解事件传播机制，有效控制事件处理顺序。 3. **CSS操作** - 动态样式修改：通过JavaScript改变元素的样式属性，如颜色、大小、位置等，实现动态效果。 - CSS3动画：结合CSS3的transition和...
- `event delegation`：事件委托，利用事件冒泡原理，提高性能和代码复用性。 12. **DOM操作** - `getElementById`、`getElementsByClassName`、`querySelectorAll`：查找DOM元素。 - `innerHTML`、`textContent...
标题中提到的“JavaScript捕捉事件和阻止冒泡事件实例分析”，明确指出了本文将涉及两个关键的JavaScript事件处理机制：事件捕捉和阻止事件冒泡。在描述中，提到了冒泡原理和相关的操作技巧，这说明将通过对实例的...
实例会涵盖DOM事件、事件监听器和事件冒泡等概念。 7. **DOM操作**：Document Object Model（DOM）是HTML和XML文档的结构表示，JavaScript可以通过DOM API来操作网页元素。学习如何选择、添加、删除和修改DOM元素...
// 只支持事件冒泡 oEvent.isChar = (oEvent.charCode > 0); oEvent.pageX = oEvent.clientX + document.body.scrollLeft; oEvent.pageY = oEvent.clientY + document.body.scrollTop; // ... } // 其他...
本资源集合名为“JavaScript精彩网页特效实例精粹”，它包含了多个使用JavaScript编写的网页特效实例，旨在帮助开发者提升网页的交互性和用户体验。 1. **基础概念** - JavaScript语法：JavaScript是基于...