还在整理当中~~~
1、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>test-event-bubble</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
#test-wrap div{border:1px solid #ccc;padding:5px 10px 10px;cursor:pointer;}
#test2{margin-top:15px;}
</style>
</head>
<body>
<div id="test-wrap">
<h3>事件冒泡</h3>
<div id="test">
test
<div id="sub">
sub
<div id="on">this is on</div>
</div>
</div>
<h3>没有冒泡</h3>
<div id="test2">
test2
<div id="sub2">
sub2
<div id="on2">this is on2</div>
</div>
</div>
</div>
<script type="text/javascript">
var $ = function(){ return document.getElementById(arguments[0])};
var test = $('test'),
sub = $('sub'),
on = $('on'),
test2 = $('test2'),
sub2 = $('sub2'),
on2 = $('on2');
var can = function(event){
var e = event || window.event;
if(window.event){
//cancelBubble的字面意思是取消冒泡
//如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
e.cancelBubble = true;
} else {
e.preventDefault(); //方法取消事件的默认动作
e.stopPropagation(); //stopPropagation的字面意思是停止传播。
}
}
on.onmouseover = function(event){
this.style.border = '2px dashed red';
}
sub.onmouseover = function(event){
this.style.border = '2px dashed green';
}
test.onmouseover = function(event){
this.style.border = '2px dashed blue';
}
on2.onmouseover = function(event){
can(event);
this.style.border = '2px dashed red';
}
sub2.onmouseover = function(event){
can(event);
this.style.border = '2px dashed green';
}
test2.onmouseover = function(event){
can(event);
this.style.border = '2px dashed blue';
}
on.onmouseout = sub.onmouseout = test.onmouseout = on2.onmouseout = sub2.onmouseout = test2.onmouseout = function(){
this.style.border = '1px solid #ccc';
}
</script>
</body>
</html>
分享到：
相关推荐
JavaScript中的事件冒泡是事件处理的一个重要概念，它是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档）的过程。这个机制允许事件在事件流的每个阶段都...
JavaScript中的事件冒泡机制是DOM事件处理的核心概念之一，它涉及到事件在DOM树中的传播方式。事件流主要有三种阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。 事件捕获阶段是从DOM树的根节点开始，沿着树向下...
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
在JavaScript中，我们可以使用`event.stopPropagation()`方法来阻止事件冒泡。当我们在监听的事件处理函数中调用这个方法时，可以确保事件不会继续向上层元素传播。例如，如果我们在一个内部元素上监听`mousewheel`...
JavaScript事件冒泡是Web开发中的一个关键概念，它涉及到用户与网页交互时事件的传递机制。在浏览器环境中，事件冒泡是指事件从最深的节点开始，然后逐级向上层节点传播事件的过程。这个过程允许事件处理函数在不同...
在JavaScript的DOM编程中，事件冒泡是一个非常重要的概念，尤其在处理多级嵌套元素的事件时。事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档...
在JavaScript编程中，事件处理是不可或缺的一部分，尤其是事件冒泡（Event Bubbling）机制，它是理解DOM（Document Object Model）事件处理的关键概念之一。事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次...
本段代码演示了如何使用JavaScript取消HTML事件的冒泡，即当后代元素的事件被触发时，祖先元素的相同事件也会被触发。代码中，页面包含一个div元素和一个嵌套在其中的span元素，分别设置了单击响应函数。当单击span...
JavaScript事件冒泡是Web开发中的一个关键概念，它在网页交互和动态效果中扮演着重要角色。事件冒泡源于浏览器处理事件的方式，当一个事件（如点击、鼠标移动等）在一个元素上触发时，该事件会自底向上沿着DOM树...
谈起JavaScript的 事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。 事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。 事件冒泡阶段：...
在JavaScript和许多其他基于DOM（文档对象模型）的编程语言中，"事件冒泡"是一个重要的概念，尤其在处理用户交互时。事件冒泡是指事件从最深的节点开始，然后逐级向上传播到其父节点的过程。这个过程就像气泡在水中...
JavaScript+jQuery 网页特效设计;鼠标事件;1、鼠标事件;1、鼠标事件（案例）;2、键盘事件;2、键盘事件（案例）;3、事件的冒泡与阻止;3、事件的冒泡与阻止;3、事件的冒泡与阻止;3、事件的冒泡与阻止;3、事件的冒泡与...
js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序...
JavaScript中的事件处理机制是网页交互的核心，其中包括了两种主要的事件传播模式：事件冒泡（Bubbling）和事件捕获（Cropping）。事件冒泡是指事件从最深的节点开始，然后逐级向上传播到最外层的节点。而事件捕获则...
本文将详细介绍如何使用原生JavaScript (JS) 和 jQuery 来阻止事件冒泡，并通过实际示例加深理解。 #### 二、JS 阻止事件冒泡的方法 ##### 1. 原生JS阻止事件冒泡 在原生JS中，阻止事件冒泡可以通过以下两种方式...
JavaScript 事件冒泡是Web开发中的一个重要概念，它涉及到用户与网页交互时事件的处理方式。事件冒泡是指在一个对象上触发的事件会按照从内到外的顺序依次经过其所有父级元素，直到到达文档的根节点（通常是document...
js阻止冒泡事件的方法有2种。 事件冒泡：当一个元素上的事件被触发时，同样的事件会在那个元素的所有祖先元素中被触发。 这个事件是从原始元素开始一直冒泡到DOM树最上层。 目标元素：任何一个事件的目标元素...
尽管在实际应用中事件捕获使用较少，但它有助于在事件到达目标元素之前进行预处理。 下面的代码展示了事件捕获的例子： ```javascript window.onload = function() { let box = document.getElementById("box...