<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<title>事件冒泡应用实例</title>
<style type="text/css" >
.button {
color: blue;
width: 120px;
}
</style>
<script type="text/javascript" defer="defer">
function init(){
try {
document.onmousemove = update;
}
catch(e) {
alert(e);
}
}
function update(e){
e = e || window.event;
var cameFrom = e.toElement ? e.toElement : e.explicitOriginalTarget; //event source
cameFrom = (cameFrom || (e.srcElement ? e.srcElement : e.fromElement));
if(typeof cameFrom != 'undefined' && cameFrom != null) {
var theId = cameFrom.getAttribute("id");
var theName = cameFrom.getAttribute("name");
var theClass = cameFrom.className;
document.getElementById("status").innerHTML = "id=[" +( theId || ' ') + "] name=[" +( theName || ' ') + "] class=[" +( theClass || ' ') + "]";
}else {
}
}
</script>
</head>
<body onload="init();">
<input type = "text " size = "20" name = "test1" /><br/>
<input type = "button" name = "test2" /><br/>
<input type = "button" class= "button" name = "test3" /><br/>
<input type = "checkbox" id = "id3" /><br/>
<hr color="#fe3300"/>
<div id="status" ></div>
</body>
</html>
分享到：
相关推荐
事件冒泡（Event Bubbling）是指最具体的元素（最内层的节点）首先触发事件，然后事件逐级向上传播到不那么具体的节点（直到文档的根节点）。相反地，事件捕获（Event Capturing）则是从最不具体的节点（根节点）...
当鼠标右键被点击时，事件会从最外层的DOM节点开始，沿着DOM树向下传播，直到到达事件发生的元素，然后再次向上冒泡回顶部。在JavaScript中，我们可以利用`addEventListener`或`attachEvent`（IE浏览器特有）来监听...
- 事件目标是事件实际发生的元素，可以通过`event.target`获取。 10. **事件修饰符（Event Modifiers）** - `once`修饰符确保事件处理程序只执行一次。 - `passive`修饰符用于优化滚动事件，不阻止页面滚动。 ...
4. 事件冒泡（Event Bubbling）和事件捕获（Event Capturing）：这两个是事件传播的机制。事件冒泡是指事件从最深的节点开始，然后逐级向上层节点传播；事件捕获则相反，从最外层节点开始向下传播。通过`...
DOM事件模型分为三个层次：**事件冒泡（Event Bubbling）**、**事件捕获（Event Capturing）**和**DOM2级事件模型**。事件冒泡是从最深的节点开始，逐级向上层节点传播事件；事件捕获则相反，从最外层节点开始，向下...
1. **隧道事件**：也称为预检事件（Preview Event），它们沿着元素树从根到叶向下传递，允许父元素在子元素之前捕获和处理事件。例如，`PreviewMouseDown` 是鼠标点击的隧道事件。 2. **冒泡事件**：则沿着元素树从...
2. **Tunneling事件**（穿透事件，也称为预置事件）：与冒泡事件相反，穿透事件从根元素开始，向下穿过元素树，直到到达事件源。它们在目标元素之前到达，因此有时也被称为“先行事件”。这提供了一个在目标元素处理...
- 熟悉事件流（Event Flow），包括事件捕获（Event Capturing）和事件冒泡（Event Bubbling）的概念及应用。 JavaScript事件驱动编程非常依赖于浏览器的DOM（Document Object Model）和BOM（Browser Object Model...
在这个模型中，事件从`document`节点开始向下传递到目标元素，然后从目标元素向上冒泡回`document`。开发者可以使用`addEventListener`和`removeEventListener`方法来添加和移除事件监听器，并通过`event....
例如，`event.target`可以获取触发事件的元素，`event.clientX`和`event.clientY`分别表示鼠标相对于视口的水平和垂直坐标。 四、事件冒泡与事件捕获 事件在DOM树中的传播有两种模式：事件冒泡（Bubbling）和事件...
### 事件冒泡（Event Bubbling） 事件冒泡是指在DOM树中，事件会从最内层元素开始，向外层元素传播。这是事件流的最后一个阶段。 ### 事件捕获（Event Capturing） 事件捕获是事件流的第一个阶段，事件会从最外层...
在现代事件处理中，我们还会遇到事件冒泡（bubbling）和事件捕获（capturing）的问题。当事件发生时，浏览器会按照一定的顺序触发事件处理程序，这可能导致父元素和子元素上的事件处理程序同时被触发。在事件冒泡中...
5. **事件冒泡（Event Bubbling）和事件捕获（Event Capturing）**：事件通常从最深的节点开始向上（冒泡）传播到根节点，而事件捕获则从根节点向下传播。可以通过设置`event.stopPropagation()`阻止事件冒泡，`...
- **事件冒泡与阻止（Event Bubbling & Prevention）**：`event.stopPropagation()`可以防止事件向上冒泡到父元素，而`event.preventDefault()`可以阻止默认行为，例如阻止表单提交。 ### 3. 动画效果（Animation）...
- **事件冒泡（Bubbling）**：事件会从触发它的元素开始，逐级向上（父元素）传递，除非事件被停止。 - **事件捕获**：与冒泡相反，事件从根元素开始向下传递，直到达到触发它的目标元素。jQuery默认不支持事件捕获...
事件传播机制说明了事件在DOM中的传播顺序，分为事件捕获（Event Capturing）和事件冒泡（Event Bubbling）两个阶段。事件捕获是从Window对象开始，逐步向目标元素传播。事件冒泡则是从事件目标元素开始，逐步向...
在该模型中，事件对象会从外层元素逐级传递到内层目标元素（冒泡），或者从根节点开始逐级向下传递（捕获）。 事件注册和解绑分别通过`addEventListener()`和`removeEventListener()`方法完成，这两个方法允许绑定...
- **冒泡（Bubbling）**：事件从最深的节点开始，逐级向上层节点传播。 - **捕获（Capturing）**：事件从最外层的父节点开始，向下传播到最深的节点。 - **目标（Target）**：到达实际触发事件的元素。 - 默认...
在捕获阶段，事件从根节点开始向下传递到目标节点，而在冒泡阶段，事件从目标节点开始向上冒泡至根节点。事件处理函数可以在两个阶段中的任一阶段或两者都注册。一般来说，事件处理函数默认在冒泡阶段被触发。在这两...