事件代理的实际应用

来源：互联网发布：python 回滚编辑：程序博客网时间：2024/05/20 05:54

今天就写一下关于事件的代理的运用，首先由一个例子来揭开个面纱，很简单：导航是我们平时用得很多的一个组件，一般都是用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>

0 0