<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页面的一种结构化的...