jQuery 事件委托

一:什么是事件委托?
      事件委托是利用事件冒泡,利用父级去触发子级的事件,只指定一个事件处理程序来管理某一类型的所有事件。Query事件的绑定和委托可以用多种方法实现,on()  、 bind()  、 live()  、 delegate() ,还有one()。好像on最好
二:为什么要用事件委托?
     1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。为什么呢?因为,每个事件处理函数都是对象,对象会占用内存,内存中的对象越多,性能就越差。此外,必须事先指定所有的事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间。而利用事件委托的话,只需要给父级绑定一个事件监听,即可让每个子级都绑定上相应的事件。

    2.另外就是如果通过js动态创建的子节点,需要重新绑定事件。而利用事件委托的话,只需要给父级绑定一个事件监听,即可让每个li都绑定上相应的事件。

 <ul id = "lists">
2          <li>列表1</li>
3          <li>列表2</li>
4          <li>列表3</li>
5          <li>列表4</li>
6          <li>列表5</li>
7          <li>列表6</li>
8  </ul>
复制代码

 下面是JavaScript代码:

复制代码
 1         var lists = document.getElementById("lists");
 2 
 3         lists.addEventListener("click",function(event){
 4 
 5             var target = event.target;
 6             //防止父元素ul也触发事件
 7             if(target.nodeName == "LI"){
 8                target.style.backgroundColor = "red";
 9             }
10         })
复制代码

jQuery中的例子

    jQuery中的事件委托方式比较丰富,就以同样的例子来说:

   1、用on方法,代码如下:

复制代码
1  $(function(){
2             $("#lists").on("click","li",function(event){
3                 var target = $(event.target);
4                 target.css("background-color","red");
5             })
6         })
复制代码

与on()对应的是off(),用来移除事件绑定。 $("p").off("click");

2.用delegate()方法,代码如下:

复制代码
1         $(function(){
2             $("#lists").delegate("li","click",function(event){
3                 var target = $(event.target);
4                 target.css("background-color","red");
5             })
6         })
复制代码

on()方法和delegate()方法对于事件委托的写法很像。并且执行事件委托的时候只有子元素(本文中的li)会触发事件,而代为执行的父元素(本文中为ul)不会触发事件,所以我们不需要盘判断触发事件的元素节点名,这一点明显优于原生的JavaScript。

3.用bind()方法,代码如下:

复制代码
1        $(function(){
2             $("#lists").bind("click","li",function(event){
3                 var target = $(event.target);
4                 if(target.prop("nodeName")=="LI"){
5                 target.css("background-color","red");}
6             })
7         })
复制代码

bind()方法同原生的JavaScript实现方法一样,当父元素代子元素执行事件时,父元素也会触发事件,所以我们需要判断一下触发事件的元素名。此外,用bind()方法给元素绑定事件的时候要注意,它只能给已经存在DOM元素添加事件,不能给未来存在DOM

同时绑定多个事件类型/处理程序:bind为例

$("button").bind({  
  click:function(){$("p").slideToggle();},  
  mouseover:function(){$("body").css("background-color","red");},    
  mouseout:function(){$("body").css("background-color","#FFFFFF");}    
});




  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值