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


Posted in Javascript onJanuary 25, 2016

我们先看官方是怎么说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()的使用方法相关内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
深入学习JavaScript对象
Oct 13 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
js实现全选和全不选
Jul 28 Javascript
JavaScript实现弹出窗口效果
Dec 09 Javascript
React Fragment介绍与使用详解
Nov 11 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
AngularJS中的Directive实现延迟加载
Jan 25 #Javascript
AngularJS中的Directive自定义一个表格
Jan 25 #Javascript
理解JavaScript事件对象
Jan 25 #Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 #Javascript
学习JavaScript事件流和事件处理程序
Jan 25 #Javascript
javascript产生随机数方法汇总
Jan 25 #Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 #Javascript
You might like
用Php实现链结人气统计
2006/10/09 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
Python subprocess模块详细解读
2018/01/29 Python
python爬虫超时的处理的实例
2018/12/19 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
运动会跳远广播稿
2014/02/04 职场文书
2014年创卫实施方案
2014/02/18 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
承诺书怎么写
2014/03/26 职场文书
青年志愿者活动方案
2014/08/17 职场文书
订货会邀请函
2015/01/31 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
部门2015年度工作总结
2015/04/29 职场文书
公司开业致辞
2015/07/29 职场文书
丧事答谢词大全
2015/09/30 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL