dom事件与setTimeout

最新推荐文章于 2023-02-17 11:12:44 发布
最新推荐文章于 2023-02-17 11:12:44 发布
阅读量184 收藏
点赞数
分类专栏： web 文章标签： dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jslfl/article/details/84408365
版权 

<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>
jslfl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM以及事件
weixin_42197893的博客
03-02 177
DOM: 1、Node类型: 1.1节点类型：nodeType 12种，常见的是元素节点Node.ELEMENT_NODE(1)和文本节点TEXT_NODE(3) 1.2节点关系： 访问子节点： （1）node.childNodes:保存着一个NodeList对象,可以用node.childNodes[0]或者node.childNodes.item(0)来访问子节点 （2）node.firs...
DOM 事件模型
Mark1614的博客
09-10 678
一、DOM事件模型分为捕获和冒泡 一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播有两个阶段。 （1）捕获阶段：事件从window对象自上而下向目标节点传播的阶段； （2）冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。 一般的顺序是先捕获，再冒泡。(但如果只有一个元素，按照代码执行顺序) 这里需要添加事件监听函数 事件监听函数是addEventListener('click', fn, bool) 如果不传bool的值或者bool值为falsy
HTML DOM setTimeout() 方法
evilcry2012的专栏
05-20 376
HTML DOM setTimeout() 方法 HTML DOM Window 对象 定义和用法 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 语法 setTimeout(code,millisec) 参数 描述 code 必需。要调用的函数后要执行的 JavaScript 代码串。
setTimeout()
08-27 115
定义和用法 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 语法 setTimeout(code,millisec) 参数 描述 code 必需。要调用的函数后要执行的 JavaScript 代码串。 millisec 必需。在执行代码前需等待的毫秒数。 提示和注释 提示：setTimeout() 只执行 c...
dom setTimeout计时器
qq_45827064的博客
05-19 136
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
HTML DOM方法：setTimeout与setInterval
WRITE LESS，DO MORE
07-23 538
javascript都是以单线程的方式运行于浏览器的javascript引擎中的，setTimeout和setInterval的作用只是把你要执行的代码以你设定的一个时间点插入js引擎维护的一个代码队列中，插入代码队列并不意味着你的代码就会立马执行。 setTimeout function click() { // code block1... setTimeout(function()
用setTimeout实现在DOM上(通常是菜单栏)鼠标停留一段时间才执行相应的操作
weixin_30825581的博客
06-14 158
在做一个网站、用到了这个。 通常网站是为了防止用户鼠标无意划过菜单、导致子菜单显示出来。其实用户在菜单上停留一段时间才代表用户要看那个子菜单。无意划过的时候不需要显示子菜单。所以这边就需要来一个 鼠标停留一段时间以上才执行显示子菜单的动作。 这个在很多网站上都有用 比如京东淘宝、在用户鼠标快速经过的时候并不会显示二级菜单或者切换panel 自己本来想用jquer...
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
10-18
如果你想要深入学习JavaScript事件相关的知识，可以参考相关的文档或者教程，例如《JavaScript事件与功能说明大全》等资源。 总之，通过巧妙地利用定时器，我们可以在同一DOM元素上同时实现`onClick`和`onDblClick`...
VUE DOM加载后执行自定义事件的方法
12-10
在Vue.js应用中，我们经常需要在DOM加载后执行某些自定义事件，特别是在涉及到第三方库或者需要手动操作DOM的情况下。本篇文章将详细讲解如何在Vue中处理这种情况，以解决题目中遇到的问题。 首先，Vue.js提供了...
DOM的事件处理、Windows的常用事件
weixin_61561066的博客
06-17 657
BOM（Brower Object Model）：浏览器对象模型。独立于内容和浏览器进行交互的对象。核心是window对象（1）DOM（Document Object Model）：文档对象。把文档看做对象，顶级对象（核心对象）是document。（2）BOM（Brower Object Model）：浏览器对象模型。把浏览器看做对象，顶级对象（核心对象）是window。事件三要素：（1）事件源：触发事件的对象；（2）事件类型：出发了什么样类型的事件；（3）事件处理程序：事件被触发后执行的函数（程序段）传统
onmouseover事件和onmouseout事件全面理解
09-01
最近两天在温习onmouseover事件和onmouseout事件，其实里面有很多深奥的知识，接下来小编给大家带来了onmouseover事件和onmouseout事件全面了解，感兴趣的朋友一起看下
setTimeout异步加载
daruanzai3165的博客
05-22 137
两道经典的面试题，直接上代码 for(var i=0; i<3; i++){ setTimeout(function(){ i+=i; console.log(i); },1000) } var i = 1; console.log(i); 会输...
[前端][自定义DOM事件]不使用setTimeout实现双击事件或n击事件
weixin_33884611的博客
02-22 174
使用setTimeout实现双击事件 例如，这样： let div = document.getElementById("div"); doubleClick(div, function (event) { console.log('双击') }) function doubleClick(ele, fn) { // 省略参数合...
js中的setTimeout遇到的困惑
米老头
02-09 325
1.定义 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。   注意 事项： 1、如果 setTimeout()中的要执行的方法，可以加引号或不加引号。如果 setTimeout()中的要执行的代码，则必须加引号！！！                     2. setTimeout()中的this指向的是window，而不是调用者。 2.
解决前端页面中DOM加载及数据获取的延迟问题（setTimeout和$nextTick）
elephant_my的博客
11-20 2809
1.setTimeout(() => {}, 500); ===> setTimeout用来解决第一次查看表单没有赋值成功问题 2.this.$nextTick(() => {}); $nextTick是vue的DOM更新队列的下一个tick完成时触发； ===> 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中 //等DOM加载完之后再给表单赋值 this.$nextTick(() => { this.$re
setTimeout理解
最新发布
weixin_41989250的博客
02-17 5934
如果在设定的时间内，发生新的keydown事件，则不触发Ajax通信，并且重新开始计时。所以上面的代码执行流程是：JS执行到setTimeout时，将其交给浏览器去计时（哪怕时间是0），然后去执行同步的for循环，因为例子中的for循环执行需要5s左右，在for循环执行3秒时，浏览器已经把之前的计时器计时完毕，然后推送到JS的事件队列里，当做下一个task任务执行，当前任务(for循环)不受影响，当for循环结束后，JS线程空了，然后去事件队列中取微任务或者新的任务(setTimeout)，然后执行。
js 刷新当前页面_js性能优化 -- 防抖和节流
weixin_39834090的博客
11-21 284
前段时间接触到了 JS 中 防抖和节流 ，一开始还不明白他们的意思及应用场景，可后来才知道，这是前端中最基础的性能优化。在绑定 scroll 、resize 这类事件时，当它发生时，它触发的频次非常高，间隔很近。如果事件中涉及到大量的 位置计算、DOM 操作、元素重绘 等工作且这些工作无法在下一个事件触发前完成，就会造成浏览器丢帧。持续触发这类事件导致丢帧扩大、浏览器 CPU 使用率增加、用户体验...
事件轮询与DOM渲染顺序
Raccon_的博客
01-07 2411
代码执行顺序 JS执行顺序为同步代码 微任务 DOM渲染 宏任务 document.documentElement.addEventListener(`click`,()=>{ document.documentElement.style.backgroundColor="pink" // Promise.resolve().then(()=>{ // alert(``) // document.documentElement.styl
javascript之setTimeout定时器
骑着猪猪去拍拖
06-08 283
无标题文档 * { margin:0px; padding:0px;} #qq {width:200px; height:400px; background-color:#BB8687; margin-top:10px; margin-left:10px;} #title {width:180px; height:200px; background-color:#6FE1EF; position
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值