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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
微信小程序用户信息encryptedData详解
Aug 24 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
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
PHP函数积累总结
2019/03/19 PHP
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
vue的toast弹窗组件实例详解
2018/05/14 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
详解Python实现进度条的4种方式
2020/01/15 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
应届生求职信写作技巧
2013/10/24 职场文书
电工技术比武方案
2014/05/11 职场文书
学习党章的体会
2014/11/07 职场文书
教师工作表现评语
2014/12/31 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android