详解jquery事件delegate(）的使用方法

我们先看官方是怎么说delegate()方法，delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数，使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
语法很简单

$(selector).delegate(childSelector,event,data,function)

参数说明

  • childSelector 必需。规定要附加事件处理程序的一个或多个子元素。
  • event 必需。规定附加到元素的一个或多个事件。
  • 由空格分隔多个事件值。必须是有效的事件。
  • data 可选。规定传递到函数的额外数据。
  • function 必需。规定当事件发生时运行的函数。

delegate 的函数是被某一类型的共同父元素调用。

listNode.delegate('.condition-remove','click',function(e){
e.preventDefault();
$(this).parents('.search-condition-item').remove();
});

完整实例(要实现的效果)

function renderSearchConditions(selectionId,conditions){var conditionsTemplate = '<div class="search-conditions-list-section">'+
'<ul class="search-conditions-list"></ul>'+
'</div>',
listNode = $(conditionsTemplate);
listItemTemplate = '<li class="search-condition-item" data-type="{conditonType}"><span>{condition}</span><a class="condition-remove" href="#">x</a></li>';
for(var key in conditions)
{
var condition = conditions[key].keyword,
conditionType = conditions[key].type,
listItemNode = $.substitute(listItemTemplate,{conditionType:conditionType,condition:condition});
listNode.append(listItemNode);
}
$(selectionId).prepend(listNode);
listNode.delegate('.condition-remove','click',function(e){
e.preventDefault();
$(this).parents('.search-condition-item').remove();

});
}

1.绑定的事务中，获取事务源，调用hide办法，并传入事务源对象：

$(document).delegate("body"， "click"， function(e) {
  var ev = e || window.event; // 事务
  //var target = ev.target || ev.srcElement; // 获得事务源
  hide(ev.target || ev.srcElement， true);
 });

底本用的$(window)，然则IE8之前的，貌似有bug。
$(document)不好之处，页面加载完后，会触发一次...
2. hide办法中，断定该事务源是否从指定元素中发出，即事务源元素是不是指定元素的子元素或者其本身。

//子元素断定====
 if (!!window.find)HTMLElement.prototype.contains = function(B) {
  return this.compareDocumentPosition(B) - 19 > 0
 };
 function hide(dom， isClick) {
  var nn，t，_isClick = !!isClick;
  try {
   for (var n in objList) {
    nn = objList[n];
    t = nn.getOption("target")[0];
    if (_isClick && (t == dom || t.contains(dom)))return;
    if (!_isClick || !nn.box[0].contains(dom)) nn.hide();
   }
  } catch(e) {
  }
 }

3.上方的hide办法中，isClick变量 断定 是不是点击事务触发的。以便处理惩罚resize的。resize用settimeout作处理惩罚，降落内存消费。

var reTime = null;
 $(window).bind("resize"， function() {
  if (reTime) clearTimeout(reTime);
  reTime = setTimeout(hide， 50);
 });

以上就是关于jquery事件delegate(）的使用方法相关内容，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解

    本文实例分析了jQuery中bind(),live(),delegate(),on()绑定事件方法.分享给大家供大家参考,具体如下: 前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到各位朋友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. 一.bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 复制

  • jQuery中的.bind()、.live()和.delegate()之间区别分析

    jQuery中的.bind()、.live()和.delegate()之间区别分析

    DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行. 复制代码 代码如下: $('a').bind('click',function(){alert('that tickles!')}) 因此一个单击操作会触发alert函数的执行. click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素

  • jQuery事件 delegate()使用方法介绍

    delegate定义和用法 delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素). 参数 描述 childSelector 必需.规定要附加事件处理程序的一个或多个子元素. event 必需.规定附加到元素的一个或多个事件. 由空格分隔多个事件值.必须是有效的事件. data 可选.规定传递到函数的额外数据. function 必

  • jQuery事件绑定on()、bind()与delegate() 方法详解

    啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是一直没完全弄懂之间的区别,于是今天查了下资料,自己做个总结. 之所以有这么多类型的绑定方法,是因为jQuery的版本更新的原因,如on()方法就是1.7以后出现的. jQuery的事件绑定api页面上,提到live()方法已经过时,不建议使用.所以这里我们主要就看下以下三个方法:bind().del

  • jQuery中delegate()方法的用法详解

    delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.下面我们具体来了解一下. 语法结构: 代码如下: $(selector).delegate(childofselector,type,data,function) 参数说明: childSelector 必需.规定要附加事件处理程序的一个或多个子元素. event 必需.规定附加到元素的一个或多个事件. 由空格分隔多个事件值.必须是有效的事件. data 可选.规定传递到函

  • 浅谈jquery中delegate()与live()

    delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序 例如给id是showspan的div中的span标签添加事件 <div id="showspan"><span>showspan**showspan</span></div> <span>outspan</span> <SCRIPT LANGUAGE="JavaScript"> <!--

  • jQuery中delegate()方法用法实例

    本文实例讲述了jQuery中delegate()方法用法.分享给大家供大家参考.具体分析如下: 此方法为匹配元素的子元素添加一个或多个事件,并规定当这些事件发生时运行的函数. 语法结构: 复制代码 代码如下: $(selector).delegate(childofselector,type,data,function) 参数列表: 参数 描述 childofselector 定义要附加事件处理程序的一个或多个子元素. type 可选.定义附加到元素的一个或多个事件类型.由空格分隔多个事件值.

  • 详解jquery事件delegate(）的使用方法

    我们先看官方是怎么说delegate()方法,delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数,使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素). 语法很简单 $(selector).delegate(childSelector,event,data,function) 参数说明 childSelector 必需.规定要附加事件处理程序的一个或多个子元素. event 必需.规

  • 详解jQuery事件

    事件是 Web 应用中不可或缺的一个东西,用户在应用中执行一个操作的时候,比如鼠标单击时要触发执行一些事情,就可以给该事件绑定一个事件处理程序(event handler).使用 jQuery 的 .on() 方法可以为选中的元素绑定任意的 DOM 事件,并添加事件处理程序.假设有如下 HTML 结构: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"

  • 详解jQuery中基本的动画方法

    详解jQuery中基本的动画方法

    大致介绍 通过jQuery中基本的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验 jQuery中的动画 show()和hide()方法 1.show()方法和hide()方法是jQuery中最基本的方法,hide()方法会将一个元素的display设置为"none": 2.show()方法和hide()方法会同时改变元素的宽度.高度和透明度 3.在一个元素使用hide()方法时会记录原先的display属性,当调用show()方法的时候会根据hide()方法记住

  • 详解jQuery插件开发中的extend方法

    Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,dest是要整合的空间可以使{} 或者不写 src是一个JSON表达式表示的javascript对象.... 因此里面可以添加方法属性等等... 我么通过不同的应用可以将我们自己的方法整合到jQuery空间中....实现插件开发 在jQuery中定义  jQuery.extend = jQuery.fn.extend  所以这两个函数式相同的  一.Jquery的扩展方法原型是: extend(dest,s

  • 详解jQuery中的isPlainObject()使用方法

    说明 jQuery中的isPlainObject() 函数用于判断指定参数是否是一个纯粹的对象,返回值为Boolean类型. "纯粹的对象",就是通过 { }.new Object().Object.create(null) 创建的对象. 这个方法的作用是为了跟其他的 JavaScript对象如 null,数组,宿主对象(documents),DOM 等作区分,因为这些用 typeof 都会返回object. 使用 语法: $.isPlainObject( object ) 参数说明:

  • 详解jQuery中的prop()使用方法

    prop()定义和用法 prop() 方法设置或返回被选元素的属性和值. 当该方法用于返回属性值时,则返回第一个匹配元素的值. 当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对. 注意:prop() 方法应该用于检索属性值,例如 DOM 属性(如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected). 提示:如需检索 HTML 属性,请使用 at

  • 详解Jquery 遍历数组之$().each方法与$.each()方法介绍

    $().each() 对于这个方法,在dom处理上用的比较多,如果一个html页面上面有多个checkbox,这时用$().each来处理checkbox是比较不错的; $("input[type='checkbox']").each(function(i){ $(this).attr("checked",true); }); 回调函数里面的i在此处代表input集合传递过去的索引(也就是正在遍历的input元素的索引): 但是这段代码只用到了input集合的索引

  • 详解jQuery的animate动画方法及动画排队问题解决

    详解jQuery的animate动画方法及动画排队问题解决

    animate()动画方法 作用:执行css属性集的自定义动画 语法:$(selector).animate(styles,speed,easing,callback) • 参数1: css 的属性名和运动结束位置的属性值的集合. • 参数2:可选,规定动画的速度,默认是 "normal".其他值,"slow"."normal"."fast",数字格式,单位为毫秒. • 参数3:可选,规定在不同的动画点中设置动画速度的 eas

  • 详解jQuery中ajax.load()方法

    jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector).load(URL,data,callback); load()函数用于从服务器加载数据,并使用返回的html内容替换当前匹配元素的内容. load()函数默认使用GET方式,如果提供了对象形式的数据,则自动转为POST方式. 因为默认使用的是Get请求方式,所以我们也可以在url加数据进行提交. 例

  • 详解jquery选择器的原理

    详解jquery选择器的原理 html部分 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="js/minijquery.js"></script> </head> <body>

随机推荐