JS基础复习（二）一分钟教你手写一个通用的事件绑定函数（支持普通函数和事件代理函数）

最新推荐文章于 2021-12-08 12:05:09 发布

置顶帝江学者

最新推荐文章于 2021-12-08 12:05:09 发布

阅读量380

点赞数 1

文章标签： javascript 前端 js event

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

版权

一分钟教你手写一个通用的事件绑定函数（支持普通函数和事件代理函数）

一、写在开头
最近一直在搞小程序，有点腻了，顺便复习了一下js，刚好可以写一个比较通用的绑定事件，见笑了各位。

二、发现问题
封装了一个绑定事件的函数，兼顾了普通函数和事件代理（多了一些对被代理元素的判断）

三、解决问题
因为该事件比较简单，我就把具体的解释直接写在代码的注释中，如下：

<!DOCTYPE html>
<html>
<head>
	<title>通用事件绑定函数</title>
</head>
<body>
<script type="text/javascript">
	function bindEvent(elem,type,selector,fn){
		if(fn==null){//先判断是普通的函数还是代理的函数
			fn=selector,
			selector=null
		}//普通函数不存在被代理的元素，而且只有三个元素，所以第四个参数fn必然为null，原本的函数被传到selector，故调换一下
		elem.addEventListener(type,event=>{//代理函数可以直接进入这一步，绑定事件
			const target=event.target//获取当前执行这个事件的元素
			if(selector){//代理函数需要走这个分支做判断，如果当前执行事件的元素确实是我们被代理的元素则可以执行函数
				if(target.matches(selector)){
					fn.call(target,event)
				}
			}else{//普通函数直接调用函数即可
				fn.call(target,event)
			}
		})//call只是为了修改this的指向，指向当前执行事件的元素
	}
</script>
</body>
</html>

好了，目前先到这，我是O5,希望能帮助到大家，共勉！

帝江学者

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS基础复习（二）一分钟教你手写一个通用的事件绑定函数（支持普通函数和事件代理函数）

一分钟教你手写一个通用的事件绑定函数（支持普通函数和事件代理函数）一、写在开头最近一直在搞小程序，有点腻了，顺便复习了一下js，刚好可以写一个比较通用的绑定事件，见笑了各位。二、发现问题封装了一个绑定事件的函数，兼顾了普通函数和事件代理（多了一些对被代理元素的判断）三、解决问题因为该事件比较简单，我就把具体的解释直接写在代码的注释中，如下：<!DOCTYPE html>...
复制链接

扫一扫