jquery-事件委托

57 阅读 0 评论 38 点赞

我是靠谱客的博主怕黑期待，最近开发中收集的这篇文章主要介绍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
})

2.用delegate（）方法，代码如下：

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

$(
'.pager').
delegate(
'a',
'click',
function(){

if(
$(
this).
parent().
hasClass(
'previous')){

page--

}
else{

page++

}

})

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
})