事件代理的实际应用

最新推荐文章于 2024-06-10 17:00:16 发布

Muscle_Mliu

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量641

点赞数

分类专栏： JS中实用的小方法

本文链接：https://blog.csdn.net/liuzijiang1123/article/details/56675215

版权

JS中实用的小方法专栏收录该内容

16 篇文章 0 订阅

订阅专栏

今天就写一下关于事件的代理的运用，首先由一个例子来揭开个面纱，很简单：导航是我们平时用得很多的一个组件，一般都是用ul/li组成的，然后一般来说我们会为每个li绑定一个click事件，去处理相应的事情。其实我们还可以用另一个方法，把这个click事件绑定到ul上，这样只需要绑定一次，就可以实现绑定多个li的效果了，简约了代码，又提高了效率，确实比较实用。

从上面的描述就可以看出，我们把触发事件绑定到了“父标签”上，其实就是利用了事件的冒泡性质，使得“父标签”能够代替“子标签”去实现触发事件的回调函数。

但是我们就有疑问了：

1.如果不同的子标签有不同的回调函数，那么如何去区分具体是哪一个子标签呢？

2.如果子标签会动态的增添或者减少，对于新增加的子标签的也可以代理么？

答案肯定是可以的：

1.每一个触发事件的回调函数中都会有一个event的参数，这个参数具有很多属性，最重要的是event.target这个属性，你打印这个属性可以获取当前触发的子标签具体是哪一个，然后可以通过event.target.nodeName.toLowerCase()来获取具体是什么元素（返回的是大写，所以我们最好转化成小写）event.target.id获取这个子标签的id，这个就可以解决我们第一个疑问

2.每次返回的这个evnet都是最新的，这样就可以解决我们第二个疑问。

那这样就能解决两个问题：

1.当列表很多，且每一行都需要做相应处理的时候，我们就没必要每一行去给它绑定事件。

2.当列表会动态增加的时候，我们不需要再为新增的元素绑定事件。

下面是我自己写的一个小demo，可以动态添加导航，利用事件代理为子标签及新增加的子标签绑定相应事件，不过这个适用于子标签的代理事件都是一致，没太多差别的，如果是子标签的回调函数处理的不一样的话，就需要根据id的不同然后去分情况写。

更新：2017/3/5

对于事件代理我们完全可以利用on这个jq的API来使用

$("#myul").click(function(e){
   if(e.target.nodeName.toLowerCase()=="li")
	{
	  var i=e.target.id.substring(4)-1;
	  $(".page").hide();
	  $(".page").eq(i).show();
	}
})

上面这段代码用on来替换：

$("#myul").on("click","li",function(){
	var i=this.id.substring(4)-1;
	$(".page").hide();
	$(".page").eq(i).show();
})

瞬间又少了一些代码和操作，方便了许多呢~ 第二个参数是选择器，我们可以填id class... （"#xxx" ,".xxx"）都可以，这样就可以一步到位，不用再去e.target去一个个寻找，还转换为小写，有的还要去兼容e.target这个对象。

下面是完整代码：

<!DOCTYPE html>
<head>
    <title></title>
    <style type="text/css">
      body { 
		margin: 0; 
		}
		
      div { 
		background-color: Gray; 
		text-align: center; 
		}
		
      .main { 
		margin-left: 310px; 
		height: 550px; 
		}
		
      .sidebar1 { 
		width: 300px; 
		height: 550px; 
		position: absolute; 
		top: 0; 
		}
		
     .sidebar1 ul{
		list-style:none;
	  }
	  
     .sidebar1 li{
		width:200px;
		height:50px;
		background-color:#e4e4e4;
		border:2px solid #d4d4d4;
		margin-top:2px;
		line-height:50px;
		color:#1dd4f4;
		cursor:pointer;
	  }
		
     .sidebar1 li:hover{
 		background-color:black;
	  }
	  
         .sidebar2 { 
		width: 300px; 
		height: 340px; 
		position: absolute; 
		top: 210px;  
		}
        
    </style>
</head>
<body>
    <div class="main" id="main">
		<div class="page" >第1页</div>
		<div class="page" style="display:none">第2页</div>
		<div class="page" style="display:none">第3页</div>
		<div class="page" style="display:none">第4页</div>
		<button id="btn">增加</button>
    </div>
    <div class="sidebar1" id="preView" >
		<ul id="myul">
			<li id="page1">第1页</li>
			<li id="page2">第2页</li>
			<li id="page3">第3页</li>
			<li id="page4">第4页</li>
		</ul>
    </div>
   
<script src="jquery.js"></script>
<script type="text/javascript">
    $(function(){
		$("#myul").click(function(e){
			if(e.target.nodeName.toLowerCase()=="li")
				{
					var i=e.target.id.substring(4)-1;
					$(".page").hide();
					$(".page").eq(i).show();
				}
		})
		
		$("#btn").click(function(){
			var length=$("li").length+1;
			var oLi = "<li id='page"+length+"'>第"+length+"页</li>";
			var oDiv="<div class='page' style='display:none'>第"+length+"页</div>"
			$("#myul").append(oLi);
			$("#btn").before(oDiv);
		})
	})    
</script>
</body>
</html>

Muscle_Mliu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件代理的实际应用

今天就写一下关于事件的代理的运用，首先由一个例子来揭开个面纱，很简单：导航是我们平时用得很多的一个组件，一般都是用ul/li组成的，然后一般来说我们会为每个li绑定一个click事件，去处理相应的事情。其实我们还可以用另一个方法，把这个click事件绑定到ul上，这样只需要绑定一次，就可以实现绑定多个li的效果了，简约了代码，又提高了效率，确实比较实用。从上面的描述就可以看出，我们把触
复制链接

扫一扫

专栏目录