<!DOCTYPE html>
<html>
<head>
<title>测试DOM</title>
<meta charset="utf-8"/>
<style type="text/css">
#myid li:nth-child(2n+1){
height:20px;
background-color: red;
}
</style>
<script type="text/javascript">
function addEvent (obj,eventType,callfunction,useCapture) {
var event = window.event || event;
if(window.addEventListener){
// '||'运算符的好处可以用来作默认值
var mycap=useCapture || false;
obj.addEventListener(eventType,callfunction,useCapture);
}else{
obj.attachEvent("on"+eventType,callfunction);
}
}
window.onload = function (){
var parentLi=document.getElementById("myid");
addEvent(parentLi,"click",function(){
var target = event.srcElement||event.targetElement;
if(target.nodeName=="LI"){
alert(target.innerHTML);
}
},true);
}
</script>
</head>
<body>
<ul id="myid">
<span>sdfsdf</span>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
<li id="5">5</li>
<li id="6">6</li>
<li id="7">7</li>
<li id="8">8</li>
<li id="9">9</li>
</ul>
</body>
</html>
分享到：
相关推荐
在DOM中，事件会从最深的节点开始向上层节点传播，直到到达文档的根节点，这个过程就称为事件冒泡。阻止事件冒泡可以避免一个事件被多次处理，提高性能，同时允许我们对特定元素的事件进行独立控制。 在JavaScript...
当你只想让当前元素处理事件，而不希望其父元素也接收到并处理同一事件时，可以使用此方法。例如，一个点击事件在子元素上触发，但你不希望父元素的点击事件处理器被执行，就可以在子元素的事件处理器中调用`event....
但这个方法通常不是用来阻止冒泡，而是为了提前处理事件。 3. **停止事件的默认行为**： 使用`event.preventDefault()`可以阻止事件的默认行为，但并不会阻止事件的冒泡。在本例中，这可能不是必要的，因为默认...
在JavaScript编程中，事件处理是不可或缺的一部分，尤其是事件冒泡（Event Bubbling）机制，它是理解DOM（Document Object Model）事件处理的关键概念之一。事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次...
在JavaScript和许多其他基于DOM（文档对象模型）的编程语言中，"事件冒泡"是一个重要的概念，尤其在处理用户交互时。事件冒泡是指事件从最深的节点开始，然后逐级向上传播到其父节点的过程。这个过程就像气泡在水中...
JQuery中的DOM事件冒泡实例分析主要就是研究在JQuery环境下如何处理事件冒泡，以及如何控制事件冒泡以防止它引起一些预料之外的后果。 为了更好地理解事件冒泡，我们可以通过一个实例来进行分析。假设在页面上有三...
通过使用DOM2级事件接口和编写兼容性代码，可以有效地管理这些差异，确保在各种浏览器环境下都能正确处理事件。在实际开发中，理解并掌握事件冒泡以及如何处理浏览器兼容性是每个前端开发者必备的技能。
事件冒泡源于浏览器处理事件的方式，当一个事件（如点击、鼠标移动等）在一个元素上触发时，该事件会自底向上沿着DOM树（文档对象模型）逐级传播，直到到达根节点。这个过程就是事件冒泡。 事件冒泡的核心在于，...
这种方式使得在事件到达目标元素之前，可以在更高级别的元素上有机会处理事件，这对于全局事件监听或者防止事件冒泡可能带来的问题很有用。 在JavaScript中，我们可以使用`addEventListener`方法来添加事件监听器，...
jQuery库提供了方便的方式来处理DOM事件，包括阻止事件冒泡的功能。这个功能在构建交互式网页时非常有用，可以避免不必要的事件处理或者防止多次执行相同的操作。 jQuery中的`event.stopPropagation()`方法是阻止...
`addEventHandler(element, type, handler)`中，`handler`参数代表事件处理函数，而`false`表示事件冒泡阶段。错误的排列可能导致事件处理函数未正确绑定，解决方法是确保正确传递参数。 错误②：在IE事件处理程序...
目录（一）DOM事件流① 定义② 图解③ 历史（二）冒泡（三）捕获（四）在不同的阶段执行事件（五）提高内存和性能 — 事件委托① 实例② 优点 （一）DOM事件流 ① 定义 DOM事件流包括三个阶段： 捕获阶段 目标阶段 ...
DOM事件模型分为三个层次：**事件冒泡（Event Bubbling）**、**事件捕获（Event Capturing）**和**DOM2级事件模型**。事件冒泡是从最深的节点开始，逐级向上层节点传播事件；事件捕获则相反，从最外层节点开始，向下...
事件冒泡是指事件从最深的节点开始，然后逐级向上传播到根节点，每个节点都会依次处理事件。 4. 面向对象基础 JavaScript是一种基于对象的脚本语言，也支持面向对象编程。在JavaScript中创建对象有多种方式，包括...
在DOM2级事件处理模型中，可以通过设置`addEventListener`方法的第三个参数来指定事件处理函数是在捕获阶段还是冒泡阶段执行。 ```javascript // 在冒泡阶段执行 button.addEventListener('click', function(event)...
但需要注意的是，这两个方法没有捕获阶段的概念，它们只处理事件冒泡。 在实际应用中，事件冒泡和捕获的区别可能会导致不同的行为。例如，当在一个包含多个嵌套元素的结构中添加事件监听器时，点击内部元素会依次...
2. **事件冒泡与事件捕获**: 事件通常会从最深的节点开始向上冒泡到最外层节点，也可以选择事件捕获模式，从最外层节点开始向下处理事件。 3. **事件对象**: 每个事件都会触发一个事件对象，它包含了与事件相关的...
本文将探讨如何利用jQuery实现一个技巧，使得任何组件都能够支持类似于DOM事件的管理，包括事件派发、添加/删除监听器、事件冒泡和阻止默认行为。 首先，我们来看传统的发布-订阅模式。这种模式通常用于实现组件间...
`addEventListener`方法的第三个参数`useCapture`用于启用事件捕获，值为`true`表示在捕获阶段处理事件。尽管在实际应用中事件捕获使用较少，但它有助于在事件到达目标元素之前进行预处理。 下面的代码展示了事件...