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


Posted in Javascript onOctober 13, 2016

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。下面我们具体来了解一下。

语法结构:

代码如下:

$(selector).delegate(childofselector,type,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);
 }
 );
Javascript 相关文章推荐
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
vue.js的提示组件
Mar 02 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
Angular简单验证功能示例
Dec 22 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
原生js无缝轮播插件使用详解
Mar 09 Javascript
炫酷的js手风琴效果
Oct 13 #Javascript
轻松搞定js表单验证
Oct 13 #Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 #Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 #Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 #Javascript
JS取模、取商及取整运算方法示例
Oct 13 #Javascript
JavaScript中常用的验证reg
Oct 13 #Javascript
You might like
php md5下16位和32位的实现代码
2008/04/09 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
Seajs的学习笔记
2014/03/04 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
详细分析vue表单数据的绑定
2020/07/20 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python translator使用实例
2008/09/06 Python
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
对python中return和print的一些理解
2017/08/18 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
Html5元素及基本语法详解
2016/08/02 HTML / CSS
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
override和overload的区别
2016/03/09 面试题
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
初中家长评语和期望
2014/12/26 职场文书
英语教师个人工作总结
2015/02/09 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
酒会开场白大全
2015/06/01 职场文书