今天读javascript dom 编程艺术， 里面提到一个简单幻灯片的实现程序。牵涉到了事件冒泡，event对象浏览器兼容 ,循环内注册事件传递索引参数总是最后一个值等问题，感觉挺有代表性的。所以记录下来，以备以后查询。
首先事件冒泡，查询相关文档资料如下：
当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。
冒泡的思路就是在祖先节点上监听事件，结合event.target/event.srcElement来实现最终效果。
利用冒泡可以让事件挂钩更干净，有效减小内存开销
源代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd">
<html>
<head>
<title>PMS 客户营销</title>
<style type="text/css">
ul li {
list-style:none ;
}
#viewImg img{
width:100px;
height:200px;
background-color:red;
}
.root{
width:400px;
height:300px;
background-color:red;
}
</style>
</head>
<body>
<h1>老婆图片</h1>
<ul id="rootImg" class="root">
<li>
<a href="./images/a.jpg"> a</a>
</li>
<li>
<a href="./images/b.jpg"> b</a>
</li>
<li>
<a href="./images/c.jpg"> c</a>
</li>
<li id="viewImg">
<img id="img" src="./images/a.bmp" />
</li>
</ul>
<script type="text/javascript">
function viewImg(src){
var element = document.getElementById('img');
if(element){
element.setAttribute('src',src);
}
}
window.onload = function(){
/*
var doms = document.getElementsByTagName('a');
for(var i=0;i<doms.length;i++){
doms[i].onclick = function(i){
return function(){
alert(i);
viewImg(this.href);
return false ;
}
}(i);
}
*/
//通过使用匿名函数，解决for循环参数传递的时候 ，索引会是最后一个的问题
//上述方式 是对每一个 a标签进行事件监听
var rootImg = document.getElementById('rootImg');
if(rootImg){
rootImg.onclick = function(event){
var et = window.event || event ;
//IE下 event为全局对象 ，ff下event作为事件的第一参数传递给事件处理函数
var srcElement = et.target || et.srcElement ;
// w3c 标准 target ie 下srcElement
if(srcElement.nodeName=="A"){
var src = srcElement.getAttribute('href');
var targetElement = document.getElementById('img');
targetElement.setAttribute('src',src);
}//监听ul 下的 a标签
return false ; //返回false 取消 a标签的浏览器默认动作。
};
}
//利用事件的冒泡机制，来简化事件的监听
};
</script>
</body>
</html>
附录(以下内容来自百度)：
事件传播——冒泡与捕获
DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。幸运的是，W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。
默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Firefox和Safari里，你可以显式的指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。
冒泡事件流
当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。
捕获事件流
事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获，如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理；否则，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。事件到达目标元素后，它会接着通过DOM节点再进行冒泡。
分享到：
相关推荐
标题中的“阻止滚动条事件冒泡”指的是在用户滚动页面某个部分时，阻止这个滚动事件向上传递到其他元素或窗口，特别是阻止`mousewheel`事件的冒泡。`mousewheel`事件通常用于处理鼠标滚轮滚动的行为，它在用户滚动...
JavaScript中的事件冒泡是事件处理的一个重要概念，它是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档）的过程。这个机制允许事件在事件流的每个阶段都...
在JavaScript的DOM编程中，事件冒泡是一个非常重要的概念，尤其在处理多级嵌套元素的事件时。事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档...
在JavaScript编程中，事件处理是不可或缺的一部分，尤其是事件冒泡（Event Bubbling）机制，它是理解DOM（Document Object Model）事件处理的关键概念之一。事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次...
解决/阻止 div层内的div层点击事件冒泡触发的小方法 示例代码
jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡...
JavaScript事件冒泡是Web开发中的一个关键概念，它涉及到用户与网页交互时事件的传递机制。在浏览器环境中，事件冒泡是指事件从最深的节点开始，然后逐级向上层节点传播事件的过程。这个过程允许事件处理函数在不同...
为了取消div元素的单击事件冒泡，代码中使用了even.cancelBubble = true;语句。本段代码适合HTML初学者学习。关键词：事件冒泡、取消冒泡、单击事件。用途：学习如何使用JavaScript取消HTML事件的冒泡。
事件冒泡和事件捕获是两种不同的事件处理机制，它们决定了事件如何在DOM（Document Object Model）层次结构中传播。了解这两者对于优化事件处理性能和编写高效代码至关重要。 事件冒泡是从最具体的节点（通常是DOM...
JavaScript事件冒泡是Web开发中的一个关键概念，它在网页交互和动态效果中扮演着重要角色。事件冒泡源于浏览器处理事件的方式，当一个事件（如点击、鼠标移动等）在一个元素上触发时，该事件会自底向上沿着DOM树...
JavaScript+jQuery 网页特效设计;鼠标事件;1、鼠标事件;1、鼠标事件（案例）;2、键盘事件;2、键盘事件（案例）;3、事件的冒泡与阻止;3、事件的冒泡与阻止;3、事件的冒泡与阻止;...3、事件的冒泡与阻止
1. **创建VI**：首先，新建一个VI，命名为"事件冒泡排序.vi"。在前面板上，添加一个数组控件用于输入待排序的数据，再添加一个数组指示器用于显示排序后的结果。 2. **设计程序框图**：在程序框图中，首先创建一个...
在JavaScript的世界里，事件冒泡是一个重要的概念，它是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档）的过程。jQuery库提供了方便的方式来处理DOM...
### JS与jQuery阻止事件冒泡详解 #### 一、引言 在Web开发中，事件处理是不可或缺的一部分，其中事件冒泡机制尤为重要。事件冒泡是指事件从最深层的节点开始，逐级向上传播至最顶层的节点。在某些情况下，我们希望...
JavaScript中的事件处理是Web开发中的核心概念，主要涉及事件冒泡、事件捕获以及事件委托。这三种机制在处理用户交互和DOM元素之间的事件时起着至关重要的作用。 1. **事件冒泡**：事件冒泡是事件处理的默认模式，...