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 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
js计算页面刷新的次数
Jul 20 Javascript
event.srcElement 用法笔记e.target
Dec 18 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
微信小程序实现电子签名并导出图片
May 27 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脚本的10个技巧(2)
2006/10/09 PHP
php入门小知识
2008/03/24 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
简单理解Python中的装饰器
2015/07/31 Python
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
Python中的With语句的使用及原理
2020/07/29 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
Python读写Excel表格的方法
2021/03/02 Python
会议欢迎标语
2014/06/30 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
西安事变观后感
2015/06/12 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
Minikube搭建Kubernetes集群
2022/03/31 Servers