<html>
<head>
<script type="text/javascript">
function mouseout(){
alert("mouseout!!");
}
</script>
</head>
<body>
<div id="div1" onmouseout="mouseout()" style="width: 100px;height: 100px;background-color: red;">
<div style="width: 50px;height: 50px;background-color: blue;">
<a>aaaaaaaa</a>
</div>
</div>
</body>
</html>
我的目的是鼠标移到div1外面时执行事件，里面的div和a元素应和div1是一个整体，但运行时，由于事件模型的干扰，当鼠标移进里面的div或a元素时，div1的onmouseout事件也会被触发，这样就不合本意，通过下面方法可解决，再加入onmouseover事件
var timeOut;
function mouseout(){
timeOut = setTimeout(function (){
alert("mouseout!!");
},1);
}
function mouseover(){
clearTimeout(timeOut);
}
下面是网友提供的DOM事件模型测试，比较不错
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" media="screen">
div * {
display: block;
margin: 4px;
padding: 4px;
border: 1px solid white;
}
textarea {
width: 20em;
height: 2em;
}
</style>
<script type="text/javascript">
//<![CDATA[
function init() {
var log = document.getElementsByTagName('textarea')[0];
var all = document.getElementsByTagName('div')[0].getElementsByTagName('*');
for (var i = 0, n = all.length; i < n; ++i) {
all[i].onmouseover = function(e) {
this.style.border = '1px solid red';
log.value = '鼠标现在进入的是： ' + this.nodeName;
};
all[i].onmouseout = function(e) {
this.style.border = '1px solid white';
};
}
var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*');
for (var i = 0, n = all2.length; i < n; ++i) {
all2[i].onmouseover = function(e) {
this.style.border = '1px solid red';
if (e)//停止事件冒泡
e.stopPropagation();
else
window.event.cancelBubble = true;
log.value = '鼠标现在进入的是： ' + this.nodeName;
};
all2[i].onmouseout = function(e) {
this.style.border = '1px solid white';
};
}
}
window.onload = init;
//]]>
</script>
</head>
<body>
<p>
DOM树的结构是：
</p>
<pre><code>
UL
- LI
- A
- SPAN
</code></pre>
<div>
<ul>
<li>
<a href="#"><span>Bubbllllllllllllllle</span></a>
</li>
<li>
<a href="#"><span>Bubbllllllllllllllle</span></a>
</li>
</ul>
</div>
<textarea></textarea>
<p>
鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（<code>
mouseover</code>
）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边。
</p>
<div>
<ul>
<li>
<a href="#"><span>Bubbllllllllllllllle</span></a>
</li>
<li>
<a href="#"><span>Bubbllllllllllllllle</span></a>
</li>
</ul>
</div>
<p>
如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。
</p>
</body>
</html>
分享到：
相关推荐
10. **动画与定时器**：结合`setTimeout()`和`setInterval()`函数，我们可以实现简单的DOM元素动画效果。例如，改变元素的位置或透明度，以创建动态视觉效果。 这个练习项目会涵盖以上这些基本概念，通过实际操作，...
8. **DOM事件冒泡与捕获**：事件流的两种模式，理解它们对于处理复杂事件交互至关重要。冒泡是从最深的节点开始向上逐级传播事件，而捕获则从文档根节点向下到目标节点。 9. **DOMContentLoaded和load事件**：...
11. **动画与定时器**：利用`setTimeout`和`setInterval`实现定时执行的动画效果，结合DOM操作可以创建动态的网页交互。 12. **DOM性能优化**：了解DOM操作可能带来的性能影响，比如避免不必要的DOM遍历，使用文档...
JavaScript DOM（Document Object Model）操作是前端开发中的基础技能，它允许我们通过代码与网页的结构进行交互。在这个“Javascript_Dom操作案例”中，我们将深入探讨如何利用JavaScript有效地操纵DOM元素，提升...
在这个“记录我的旅程之JavaScript DOM系列”中，我们深入探讨了一系列与DOM相关的例题，这些例题旨在帮助开发者更好地理解和掌握DOM操作技巧。 首先，我们要了解DOM的基本概念。DOM是一个树形结构，它将网页内容...
4. **事件处理与事件委托**：如何利用DOM事件来响应用户交互，以及事件委托技术，用于优化大规模事件处理。 5. **动画与定时器**：使用setTimeout和setInterval创建动画效果，以及如何避免常见的计时器问题。 6. *...
然而，当模态对话框打开时，页面的主执行线程被阻塞，使得与用户交互相关的事件无法立即响应，这包括`setTimeout`的回调函数。 问题的根本在于模态对话框创建了一个新的事件循环，这个新的循环会在对话框关闭之前...
这个服务是AngularJS中封装的JavaScript原生的`setTimeout`函数，它允许开发者在AngularJS的下一个事件循环结束之后执行函数，即等待当前的数据绑定和视图渲染操作完成后才去获取DOM对象。使用`$timeout`服务来延迟...
《JavaScript DOM编程艺术》是Jeremy Keith撰写的一本经典著作，主要介绍了如何使用JavaScript与DOM（Document Object Model）进行交互，从而实现网页动态效果和富用户体验。DOM是HTML和XML文档的编程接口，允许我们...
9. **事件冒泡与事件捕获** - 事件冒泡：事件从最深的节点开始，逐级向上层节点传播事件。 - 事件捕获：事件从最外层节点开始，逐级向下层节点传播事件。 - `event.stopPropagation()`阻止事件冒泡，`event....
本章节主要讲解了浏览器对象模型（BOM）和文档对象模型（DOM），并对 JavaScript 中的事件、存储机制和 DOM 操作进行了详细的讲解。 BOM 概述： 浏览器对象模型（BOM）是指浏览器的对象模型，它是 JavaScript ...
11. **性能优化**：探讨DOM操作的性能影响，学习如何减少DOM操作次数、使用文档片段（documentFragment）和事件委托等技巧来提升页面性能。 通过阅读《JavaScript DOM编程艺术》，你不仅可以巩固JavaScript基础知识...
* 设置超时与暂停（setTimeout()、setInterval()) * 状态栏 除了window对象之外，还有其他一些BOM对象，如document对象、location对象、navigator对象、screen对象、history对象、frames对象等。这些对象的属性和...
但请注意，Web Workers不适用于所有类型的JavaScript操作，如DOM操作或访问全局变量。 示例代码可能如下所示： ```javascript // 假设我们有一个函数需要在对话框关闭后执行 function delayedAction() { // ... }...
- **DOM更新**：在修改DOM元素后，可以使用`setTimeout(func, 0)`确保在DOM更新完成后再执行依赖于新状态的代码。 - **UI渲染优化**：通过将耗时操作拆分成多个小任务，利用`setTimeout(func, 0)`间隔执行，避免阻塞...
`setTimeout` 与 `setInterval` 类似，但它只执行一次，`clearTimeout` 用于清除定时。Body 和 `document` 对象有各种事件，如 `onload`（加载完成）、`onunload`（页面关闭）和 `onbeforeunload`（准备关闭）。例如...
JavaScript DOM编程艺术是一本深入探讨JavaScript与DOM交互的权威指南，它涵盖了JavaScript在网页动态化、元素操作、事件处理以及Ajax通信等方面的核心技术。DOM（Document Object Model）是Web页面的一种结构化的...
DOM是Web页面和XML文档的结构化表示，它为开发者提供了与文档交互的标准接口。通过DOM，我们可以查找、访问、修改以及添加网页元素，从而实现动态更新和交互效果。 这本书的源代码包含了一系列的示例，旨在帮助读者...