Javascript系列之（二）——js中的事件委托及其封装

最新推荐文章于 2022-05-17 00:29:48 发布

Claire小柒

最新推荐文章于 2022-05-17 00:29:48 发布

阅读量422

点赞数 5

分类专栏： JS技术

本文链接：https://blog.csdn.net/Claire_Moon/article/details/97022624

版权

JS技术专栏收录该内容

14 篇文章 1 订阅

订阅专栏

Js中的事件委托及其封装

今天来学习事件委托及其封装

介绍

首先我们来看一下事件委托的介绍和定义，“委托”，顾名思义就是自己不想做，委托给别人做；“事件委托”，就是自己不想做某个事件，委托给其他元素做。
定义将多个相同子元素的相同事件，绑定给页面上现存的共同的父元素，利用事件冒泡，配合事件对象身上的事件源找到真正点击的元素
优点
节省性能；可以给页面上暂时不存在的元素绑定事件
缺点
在事件委托中不方便使用this

案例

假设页面布局如图，目的是通过事件委托找到真正的事件源在这里插入图片描述
html代码如下,

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{background: #ccc;}
			li{background: #eee;line-height: 40px;margin: 10px 0;}
		</style>
	</head>
	<body>
		<ul>
			<li>link1</li>
			<li class="list">link2</li>
			<li>link3</li>
			<li class="list">link4</li>
			<li>link5</li>
			<li>link6</li>
			<li>link7</li>
			<li class="list">link8</li>
			<li>link9</li>
		</ul>
	</body>
	<script>
		var oul = document.querySelector("ul")
		oul.onclick = function(eve){
			var e = eve || window.event;
			var target = e.target || e.srcElement;
			if(target.className == "list"){
				console.log(target);
			};
		}
	</script>
</html>

运行结果
代码运行结果如下，只有在页面上点击link2, link4, link8的时候，才会打印点击的事件源，
在这里插入图片描述

事件委托的封装

现在需要对事件委托函数进行封装，如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul>
        <li class="over">1</li>
        <li class="over">2</li>
        <li class="clk">3</li>
        <li class="over">4</li>
        <li class="clk">5</li>
    </ul>
</body>
<script>
    var oul=document.querySelector("ul");
    var aliM=document.querySelectorAll(".over");
    var aliC=document.querySelectorAll(".clk");

    //执行事件委托的函数是立即传入,要委托的子元素和假的事件处理函数
    oul.onclick=eveAgent(aliC,function(e){
        console.log(this);
    })
    oul.onmouseover=eveAgent(aliM,function(){ 
        console.log("this is mouseover event");
        console.log(1);
        } );

    function eveAgent(achid,callback){
//因为eveEnt立即执行了,导致没有真正的事件处理函数,所以要return出一个函数作为真正的事件处理函数
        return function(eve){
            var e = eve || window.event;
            var target = e.target || e.srcElement;
  //遍历传进来的子元素,与每次点击到的事件源做比较,一致，表示找到点击的元素了
            for(var i=0;i<achid.length;i++){
                if(achid[i] == target){
 		// 执行用户传进来的假的事件处理函数了
		// 为了让用户的假的事件处理函数更真实,利用bind修改this指向
		// 时将事件对象给假的事件处理函数
                    callback.bind(target)(e);  //bind，将事件对象给假的处理函数
                }
            }
        }
    }
</script>
</html>

结果如下
在这里插入图片描述
好了，js中的事件委托到此结束啦~

Claire小柒

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Javascript系列之（二）——js中的事件委托及其封装

Js中的事件委托及其封装今天来学习事件委托及其封装介绍首先我们来看一下事件委托的介绍和定义，“委托”，顾名思义就是自己不想做，委托给别人做；“事件委托”，就是自己不想做某个事件，委托给其他元素做。定义将多个相同子元素的相同事件，绑定给页面上现存的共同的父元素，利用事件冒泡，配合事件对象身上的事件源找到真正点击的元素优点节省性能；可以给页面上暂时不存在的元素绑定事件缺点在事件委托...
复制链接

扫一扫