事件的冒泡与捕获、事件的绑定移除、闭包的理解应用，JS中的定时器

最新推荐文章于 2022-06-30 15:07:50 发布

王梦翰

最新推荐文章于 2022-06-30 15:07:50 发布

阅读量441

点赞数 1

文章标签：事件的捕获与冒泡事件的绑定与移除闭包 JavaScript当中的定时器

本文链接：https://blog.csdn.net/itwangmenghan/article/details/89462440

版权

1、事件流

事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件.
事件流包括两种模式：事件冒泡和事件捕获.
事件冒泡:是值子元素和父元素具备同样的事件,当触发子元素的事件时,也会触发父元素的事件(由内至外).子集元素先触发，父级元素后触发.
事件捕获:与事件冒泡相反,父级元素先触发，子集元素后触发.
1.事件绑定与事件移除
事件绑定：（addEventListener）与事件移除（removeEventListener）
true ：捕获 flase：冒泡
E.addEventListener（type，处理程序，true/flase）
E.removeEventListener（type，处理程序，true/flase）
重点：在设置元素事件移除时，前提条件必须是该元素具有有名称的事件处理程序

<style type="text/css">
			#big01{
				width: 400px;
				height: 400px;
				background: yellow;
			}
			#big02{
				width: 200px;
				height: 200px;
				background: pink;
			}
			#big03{
				width: 100px;
				height: 100px;
				background: deepskyblue;
			}
		</style>
		<script type="text/javascript">
			window.function(){
				var big01=document.getElementById('big01');
				var big02=document.getElementById('big02');
				var big03=document.getElementById('big03');
				//alert(big01);
				// 冒泡
				/*big03.function(){
					alert('我是最小的');
				}
				big02.function(){
					alert('我是老二');
				}
				big01.function(){
					alert('我是最大的');
				}*/
				var arr_01=new Array();
				arr_01=[big01,big02,big03];
				// alert(arr_01);
				for (var i=0;i<arr_01.length;i++) {
					// false   事件的冒泡
					// arr_01[i].addEventListener('click',bian,false);
					// true    事件的捕获
					arr_01[i].addEventListener('click',bian,true);
				}
				function bian(){
					console.log(this); 
				}
				// 移除一个元素的事件  removeEventListener（）；移除big02的元素事件
				big02.removeEventListener('click',bian,true);
				
			}
		</script>

	</head>

	<body>
		<div id="big01">大号
			<div id="big02">二号
				<div id="big03">三号
				</div>
			</div>
		</div>
	</body>

阻止冒泡
语法结构：
事件对象.stopPropagation()

<style type="text/css"> 
	.box1 {
		border: green 40px solid;
		width: 300px;
		height: 300px;
		margin: auto;
	}
	.box2 {
		border: yellow 40px solid;
		width: 220px;
		height: 220px;
		margin: auto;
	}
	span {
		position: relative;
		left: 50px;
		top: 50px;
		background-color: rgba(128, 128, 128, 0.22);
	}
</style>
<script type="text/javascript">
	window.function(){
		document.getElementById('box1').addEventListener('click',function(event){
			alert('最外层div');
		});
		document.getElementById('box2').addEventListener('click',function(event){
			alert('第二层div');
		});
		document.getElementById('span').addEventListener('click',function(event){
			alert('最里面span元素');
			event.stopPropagation(); //阻止事件冒泡
		});
	}
</script>
<body id="body">
	<div id="box1" class="box1">
		<div id="box2" class="box2">
			<span id="span">This is a span.</span>
		</div>
	</div>
</body>

*2、闭包及闭包的应用**

闭包是指有权限访问另一个函数作用域中的变量的函数
闭包就是函数和该函数作用域的组合
所有function都是闭包
注:在函数内部声明变量的时候,一定要使用var命令.如果不用的话,你实际上声明了一个全局变量!不如写在函数之外.
闭包就是能够读取其他函数内部变量的函数;由于在 Javascript 语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”. 所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁.

3、定时器

定时器有以下两种方法:
**SetInterval()?*按照指定的周期(以毫秒计)来调用函数或计算表达式,方法会不停的调用函数,直到clearInterval()被调用或者窗口被关闭.
**SetTimeout()?*在指定的毫秒数后调用函数或计算表达式.
**setInterval();**循环定时器：固定时间间隔指定一次,像闹钟一样,不关闭继续执行.

**SetTimeout();**炸弹定时器:只执行一次,不能执行下一次了.

王梦翰

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
事件的冒泡与捕获、事件的绑定移除、闭包的理解应用，JS中的定时器

1、事件流事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件.事件流包括两种模式：事件冒泡和事件捕获.事件冒泡:是值子元素和父元素具备同样的事件,当触发子元素的事件时,也会触发父元素的事件(由内至外).子集元素先触发，父级元素后触发.事件捕获:与事件冒泡相反,父级...
复制链接

扫一扫