【精简笔记】JavaScript进阶内容第三天

最新推荐文章于 2024-07-08 17:01:05 发布

阳光下的ABC

最新推荐文章于 2024-07-08 17:01:05 发布

阅读量623

点赞数 15

分类专栏： JS 文章标签：笔记 javascript 前端

本文链接：https://blog.csdn.net/2302_81331056/article/details/139997269

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

往期文章目录

【精简笔记】JavaScript基础内容第一天
 【精简笔记】JavaScript基础内容第二天
 【精简笔记】JavaScript基础内容第三天
 【精简笔记】JavaScript基础内容第四天
 【精简笔记】JavaScript基础内容第五天
 【精简笔记】JavaScript基础内容大总结
 【精简笔记】JavaScript进阶内容第一天
 【精简笔记】JavaScript进阶内容第二天

前言

本文主要讲述JS的核心用法，请读者确保已熟悉JS基础语法

今日内容主要是：事件流、事件委托、其他事件、元素尺寸与位置

一、事件流

1.1 什么是事件流？

事件流指的是事件完整执行过程中的流动路径

1.2事件流说明

当触发事件时，会经历两个阶段：捕获阶段和冒泡阶段
捕获阶段是父到子，冒泡阶段是子到父
事件捕获是指当一个元素触发事件后，会从最高级的父级元素的同名事件依次调用
事件冒泡是指当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

1.3阻止冒泡

语法：

事件对象.stopPropagation()

举例说明：

<div class="father">
	<div class="son"></div>
</div>
<script>
	const fa = document.querySelector('.father')
	const son = document.querySelector('.son')
	document.addEventListener('click',function(){
	alert('最大的')
})
	fa.addEventListener('click',function(){
	alert('中等的')
})
	son.addEventListener('click',function(){
	alert('最小的')
	e.stopPropagation()
})
</script>

1.4解绑事件

function fn(){
	alert('点击')
}
btn.addEventListener('click',fn)
btn.removeEventListener('click',fn)

注意：匿名函数不能解绑事件

1.5 阻止默认行为

<form action="http://www.baidu.cn">
	<input type="submit" value="注册">
</form>
<a href="http://www.baidu.com">百度</a>
<script>
	const form =document.querySelector('form')
	form.addEventListener('submit',function(e){
		e.preventDefault()
})

	const a = document.querySelector('a')
	a.addEventListener('click',function(e){
		e.preventDefault()
}) 
</script>

二、事件委托

2.1事件委托的用途

减少注册次数，提高程序性能
举例说明：

<ul>
	<li>第一个</li>
	<li>第二个</li>
	<li>第三个</li>
	<p>第四个</p>
</ul>	
<script>
	const ul = document.querySelector('ul')
	ul.addEventListener('click',function(e){
	 if(e.target.tagName === 'LI'){
	 	e.target.style.color = 'red'
	 }
})
</script>

三、其他事件

3.1页面加载事件

第一个用法

<head>
	<script>
		img.addEventListener('load',fn())
		window.addEventListener('load',function(){
			btn.addEventListener('click',function(){
				alert(11)
		})
})
	</script>
</head>

第二用法

document.addEventListener('DOMContentLoaded',function(){})

3.2页面滚动事件

语法：

windows.addEventListener('Scroll',function(){
	//执行的操作
})

举例说明：

const div = document.querySelector('div')
div.addEventListener('scroll',function(){
	console.log(div.scrollTop)//打印被卷去多少 写在函数里面，不然会一直都是0
	console.log(document.documentElement.scrollTop)//打印整个html被卷去多少
})

scrollTop是可读写的，这也就意味着，可以提请赋值

3.3页面尺寸事件

语法：

windows.addEventListner('resize',function(){})

const div = document.querySelector('div')
console.log(div.clientWidth)//获取除border、margin外的盒子的宽度大小

四、元素的尺寸与位置

4.1offsetLeft 和 offsetTop

只读属性
获取加了定位的父级元素的左、上距离

const div =document.querySelector('div')
console.log(div.offsetLeft)

总结

今日的内容是日常开发中较为常见的用法，望读者熟练掌握