Javascript基础知识体系化学习总结（七）事件

最新推荐文章于 2024-10-07 09:24:46 发布

置顶帝江学者

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量123

点赞数

分类专栏： javascript基础知识体系学习总结文章标签： js javascript dom 前端 es6

本文链接：https://blog.csdn.net/ODST_TheSolverO5/article/details/106575417

版权

javascript基础知识体系学习总结专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Javascript基础知识体系化学习总结（七）事件

一、事件绑定
1.事件绑定就是element.addEventListener（type，fn）.
2.接收两个参数，type（绑定事件的类型如’click’ 点击事件）、fn（事件函数，书写具体的事件）
3.fn中接收一个参数，一般写为e/event，代表我们绑定的元素，很多操作例如e.preventDefault（）阻止默认行为、e.target获取当前点击元素，都是借助这个参数来实现。

二、事件冒泡
1.什么是冒泡：通俗的讲就是不仅仅触发当前元素的事件还能向上冒泡触发到其父元素甚至更上面元素的事件。
2.冒泡的过程：基于DOM结构树，事件顺着触发元素向上冒泡。
3.引用场景：事件代理。

三、事件代理
1.什么是事件代理：就是利用事件冒泡，让本应该在子元素实现的事件移到父元素上（或者更上层的元素）。
2.应用场景：瀑布流（即无限的下拉刷新加载）
3.好处：不需要给每个子元素都绑定事件，减少浏览器的内存占用，需要注意的是事件代理不能乱用，最好是在这种极端情况下即瀑布流才使用。
4.手写一个通用的事件绑定函数：

<!DOCTYPE html>
<html>
<head>
	<title>通用事件绑定函数</title>
</head>
<body>
	<div id="div1">
		<p id="p1">月影苍狼</p>
		<p>圣血天使</p>
	</div>
<script type="text/javascript">
	function bindEvent (elem, type, selector, fn) { // 四个参数分别是要绑定事件的元素，事件类型，被代理元素，执行的函数
		if(fn == null) { // 如果第四个值为null没有传，说明只是普通的事件绑定函数，调一下位置即可
			fn = selector
			selector = null
		}
		elem.addEventListener(type, event => {
			const target = event.target // 拿到当前点击的元素
			if(selector) { // 如果是事件代理
				if(target.matches(selector)) { // 判断当前点击的元素是否匹配我们的被代理元素，匹配则执行函数
					fn.call(target, event)
				}
			}else { // 普通的事件绑定函数
				fn.call(target, event)
			}
		})
	}

	const p1 = document.getElementById('p1')
	const div1 = document.getElementById('div1')
	// 普通的事件绑定，注意这里不能使用箭头函数，否则会指到全局作用域
	bindEvent(p1,'click',function(event){
		alert(this.innerHTML)
	})
	// 事件代理函数，注意这里不能使用箭头函数，否则会指到全局作用域
	bindEvent(div1,'click','p',function(event){
		console.log(this.innerHTML)
	})
</script>
</body>
</html>