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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
JavaScript常用8种数组去重代码实例
Sep 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 和 MySQL 基础教程(三)
2006/10/09 PHP
php获取mysql版本的几种方法小结
2008/03/25 PHP
php 页面执行时间计算代码
2008/12/04 PHP
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
python matplotlib中文显示参数设置解析
2017/12/15 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
python处理RSTP视频流过程解析
2020/01/11 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
英语硕士生求职简历的自我评价
2013/10/15 职场文书
写自荐信的七个技巧
2013/10/15 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
拖欠货款起诉状
2015/05/20 职场文书
植物园观后感
2015/06/11 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书