【API.三】

最新推荐文章于 2024-07-25 11:52:08 发布

乌拉拉城邦

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量129

点赞数

分类专栏： js日常笔记文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_54806335/article/details/129943919

版权

js日常笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一.事件流

1.1 事件流：事件完整执行过程中的流动路径

说明：触发事件时，会经历两个阶段：捕获、冒泡。

捕获：从父到子冒泡：从子到父（实际工作中以冒泡为主）

1.2事件捕获

1.3事件冒泡

1.4.1阻止冒泡（其实是阻止流动）

原因：因为默认是冒泡的，所以容易导致父级元素被影响，若想把事件限制在当前元素内，就需要阻止冒泡

事件对象.stopPropagatin()

<body>
	<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(e){
			alert('我是爸爸')
			e.stopPropagation()//阻止冒泡
		})
		son.addEventListener('click',function(){
			alert('我是儿子')
		}) 
	</script>
</body>

注意：这个方法本质上是阻断事件流动传播，所以不光在冒泡阶段有效，捕获阶段也有效

1.4.2阻止默认行为

const a = document.querySelector('a')
	a.addEventListener('click', function(e){
		//阻止默认行为 跳转链接，点击之后不会跳到百度
		e.preventDefault()
	})

1.5解绑事件

老版本：

新版本：

因为匿名函数没有函数名，所以无法解绑，只有写成上图样式才能解绑

其他：鼠标经过事件：mouseover、mouseout有冒泡效果

mouseenter、mouseleave没有冒泡效果（推荐）

二.事件委托

事件委托：原理是利用事件冒泡的特点，给父元素注册事件，当我们触发子元素时，会冒泡到父元素身上，从而触发父元素事件，这样可以减少注册次数，提高程序性能。

<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<p>6</p>
	</ul>
	<script>
		//事件委托
		const ul = document.querySelector('ul')
		//1.
//		ul.addEventListener('click', function(){
//			this.style.color = 'red' //点击一个，所有都变红
//		})
		//2.
		ul.addEventListener('click', function(e){
			e.target.style.color = 'blue' //e.target是 点击的那个
		})
		//3.
		ul.addEventListener('click', function(e){
			if(e.target.tagName = 'LI'){ //因为e.target会使下面的不需要变色的也变色
				e.target.style.color = 'green' //所以需要指定标签名字i，并且是大写
			}
		})
	</script>
</body>

注意：事件对象.target.tagName = '大写标签名'，这样才是找到真正触发的元素

三.其他事件-------------页面加载、元素滚动、页面尺寸

3.1页面加载事件

3.2元素滚动事件

3.3页面尺寸事件

获取宽高：可见部分宽高（不包含边框、margin、滚动条等）clientWidth、clientHeight

案例：分析flexible.js源码

四.元素尺寸与位置

乌拉拉城邦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【API.三】

原理是利用事件冒泡的特点，给父元素注册事件，当我们触发子元素时，会冒泡到父元素身上，从而触发父元素事件，这样可以减少注册次数，提高程序性能。原因：因为默认是冒泡的，所以容易导致父级元素被影响，若想把事件限制在当前元素内，就需要阻止冒泡。注意：这个方法本质上是阻断事件流动传播，所以不光在冒泡阶段有效，捕获阶段也有效。捕获：从父到子冒泡：从子到父（实际工作中以冒泡为主）其他：鼠标经过事件：mouseover、mouseout有冒泡效果。说明：触发事件时，会经历两个阶段：捕获、冒泡。
复制链接

扫一扫