jquery中事件委派代码分析以及jQuery中delegate和on的用法与区别详细解析-阿里云开发者社区

开发者社区> cometwo123> 正文

jquery中事件委派代码分析以及jQuery中delegate和on的用法与区别详细解析

简介:
+关注继续查看
jquery中事件委派我们会使用到delegate与live方法了,下面我就以delegate与live方法为例子给各位分析一下jquery 事件委派的例子吧,希望例子能帮助到各位朋友。

什么是jquery中的事件委派?

在jquery中有一个很重要的概念——事件委派,相信很多搞前端开发的人都听说过,零度逍遥本来对此不是十分理解,但经过一个高人的指点后,才发现这个功能还是蛮强大的,今天就给大家分享一下。

事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。

说的有点抽象,按照惯例,还是举个例子说明:

 代码如下 复制代码

<ul class="list">
    <li>11111<li>
    <li>222222<li>
    <li>3333<li>
    <li>4444<li>
</ul>

这是一个ul,里面包含4个li,如果想要给li加上点击事件,弹出一些内容,我们一般这样写:

$('.list li').click(function(){
    alert(1111);
})

这样当我们点击list里面的任何一个li都可以弹出‘1111’,但这样做有两个弊端:

1.很耗费资源,因为这种方式是给每个li都加上了事件,li的个数少的话还没事,如果li多的话会很耗费资源。

2.如果后期动态添加li,不会拥有这个弹出事件。

针对以上问题,可以用事件委派来解决,我们完全可以写出这样一段代码:

 代码如下 复制代码

$(".list").delegate("li", "click", function(){    
alert(1111);
});

这个就是jquery的事件委派,有的时候还是很能派上用场的,骚年们,玩起来吧!

.live()与流行的liveQuery插件很像,但有以下几个主要区别: 
* .live 目前只支持所有事件的子集,支持列表参考上面的说明。 
* .live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。 
* .live 没有"setup"和"cleanup"的过程。因为所有的事件是委派而不是直接绑定在元素上的。


HTML 代码:

 代码如下 复制代码

<p>Click me!</p>

$("p").live("click", function(){ 
$(this).after("<p>Another paragraph!</p>"); 
});


事件委派一次绑定多种事件

一次性绑定多个事件,根据事件类别委派相应的操作 
为了更好地优化上面的代码,可以通过事件委派来修改代码,修改后的代码如下:

 代码如下 复制代码

jQuery(function($) { 
var $liveTip = $('<div id="livetip"></div>').hide().appendTo('body'); 
var tipTitle = ''; 
$('#mytable').bind('mouseover mouseout mousemove', function(event) { 
var $link = $(event.target).closest('a'); 
if (!$link.length) { return; } 
var link = $link[0]; 
if (event.type == 'mouseover' || event.type == 'mousemove') { 
$liveTip.css({ 
top: event.pageY + 12, 
left: event.pageX + 12 
}); 
}; 
if (event.type == 'mouseover') { 
tipTitle = link.title; 
link.title = ''; 
$liveTip.html('<div>' + tipTitle + '</div><div>' + link.href + '</div>') 
.show(); 
}; 
if (event.type == 'mouseout') { 
$liveTip.hide(); 
if (tipTitle) { 
link.title = tipTitle; 
}; 
}; 
}); 
});

该段代码中一次性地将多个事件绑定到一个待处理的DOM对象之上,在代码的内部通过判断事件的类别来委派不同的处理代码。这样可以避免代码的重复定义,以达到避免时间冗余的效果。

事件委派、传递 

当列表里的一列被点击,新的列被加入列表。如果想让新加入的列也具有相同的事件控制,我们可以使用事件委派,把事件处理方法传递给新的列。

 代码如下 复制代码

$(document).ready(function() {
  $('#list2').click(function(event) {//注意:这里加入了参数:event
  var $newLi = $('<li class="special"><button>新按钮</button></li>'); 
  var $tgt = $(event.target); //注意:这里用到target函数
  if ($tgt.is('button')) { 
    $tgt.parent().after($newLi); 
  }//这里用到,is()函数来判断当前点击元素的属性,如果是按钮就触发事件。 
  }); 
});



在jQuery1.7中 .delegate()已被.on()取代。对于早期版本,它仍然使用事件委托的最有效手段。
在事件绑定和委派,delegate()和on在一般情况下,这两种方法是等效的。

.delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

复制代码 代码如下:

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, [selector], data, handler );

例如:.delegate()  code:
复制代码 代码如下:

$("table").delegate("td","click",function(){
 alert("hello");
});

.on()  code:
复制代码 代码如下:

$("table").on("click", "td", function() {
        alert("hi");
});

PS: 两者区别是seleter和events顺序不同
delegate和on方法被选元素的子元素必须是"合法的"子元素。比如
复制代码 代码如下:

$("table").delegate("button","click",function(){...});
$("table").on("click", "p", function(){...});

就不起作用,因为正常情况下,table子元素应为tr,td...

on(events,[selector],[data],fn),参数[selector]是可选,
一个选择器字符串用于过滤器的触发事件的选择器元素的后代。
例如:

复制代码 代码如下:

$("table").on("click", ".td1", function() {
       alert("hi");
});

过滤class为td1的table子元素

而delegate的selector是必需的。

浅谈jquery中delegate()与live()

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序
例如给id是showspan的div中的span标签添加事件

1
2
3
4
5
6
7
8
9
10
<div id="showspan"><span>showspan**showspan</span></div>
<span>outspan</span>
<SCRIPT LANGUAGE="JavaScript">
<!--
//效果就是点击一个段落<div id="showspan">中span标签将在span标签后面添加一个span标签,对于新增的span标签同样可以点击新增一个span标签,新增的标签不需要监听其click事件
$("#showspan").delegate("span", "click", function(){
   $(this).after("<span>showspan**showspan</span>");
});
//-->
</SCRIPT>

live() 方法为被选元素附加一个或多个事件处理程序(不能给其子元素添加事件)
例如给p标签添加事件

1
2
3
4
5
6
7
8
<p class="showp">pppppppp</p>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(".showp").live("click", function(){
   $(this).after("<p>pppppppp</p>");
});
//-->
</SCRIPT>

以上所述就是本文的全部内容了,希望大家能够喜欢。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java数据导入(读)Excel文件 解析
  在编程中经常需要使用到表格(报表)的处理主要以Excel表格为主。下面给出用java读取excel表格方法:   1.添加jar文件   java导入导出Excel文件要引入jxl.jar包,最关键的是这套API是纯Java的,并不依赖Windows系统,即使运行在Linux下,它同样能够正确的处理Excel文件。
904 0
自从用了Atom后发现,写代码原来是件如此美妙的事情!
作为Github上一款开源的文本编辑器,Atom一经推出就受到了极大的热捧。周围很多人都反映说,自从用了这款编辑器,写代码变得更加得心应手了,现在小编也想尝试一下Atom,看看效果如何?不过如果不急于尝试的话,也不放先把下面的快捷提前键熟悉熟悉,听过只要敲几个键立马就可以代码上传到Github呢!
10403 0
jquery事件的常用方法
单击按钮 ,按钮消失 $(document).ready(function(){ $("button").click(function(){ $(this).
775 0
jQuery基本用法二
一、原生对象和jQuery对象的相互转换 jQuery封装的方法必须是jQuery对象才能用,把原生对象放在“$()”括号里面即可; 通过get()方法可以把jQuery对象转为原生对象。
1093 0
jquery常用代码片段
1)判断一个元素是否存在 使用jQuery判断元素是否存在,非常的简单。对于一个jQuery对象,我们只需要用length属性即可判断元素是否存在,如果存在肯定是大于0,示例代码: 判断这个图片是否存在,如果存在在把这个图片替换 $(document).
803 0
JQuery中事件是否发生的判断
$(document).ready(function () {     $("html").click(function (e) {         if (e.target == $("#id/.class")[0]) {             //函数体         }     }); }); target 属性规定哪个 DOM 元素触发了该事件。
558 0
jquery中attr和prop的区别
原文:http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别? 关于它们两个的区别,网上的答案很多。
675 0
javascript 表达式、括号、常用函数和jquery库怎么样实现的分析
(一)javascript表达式 表达式是什么?表达式是对变更进行赋值、更改或计算等操作的语句。它是变量、常量、操作符的综合。根据操作符的不类型,可以分为字符操作表达式、赋值表达式、逻辑表达式、关系表达式、自增自减表达式、位表达式等。
724 0
+关注
1031
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载