原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法

/**
* 事件委托方法
* @param eventName {string}:事件名称,如'click'
* @param sub {string}: 子节点选择器,如'.sub-item'
* @param fn {function}: 事件回调方法
* @eg var ctn = document.querySelector('#menu_container');
* ctn.delegate('click','.sub-item',function(event){ console.log('clicked ...'); });
**/
Node.prototype.delegate = function(eventName, sub, fn) { // DOM 继承于 Node (原型链顶端是 Object)
var _sef = this;
this.addEventListener(eventName, function(event) {
var target = event.target || event.srcElement, // srcElement 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用
list = _sef.querySelectorAll(sub);
if (list && Array.from(list).includes(target)) {
if (typeof fn == 'function') fn.apply(target, arguments);
}
}, false);
}

使用参考备注里的说明。

原生js事件委托(事件代理)方法扩展的更多相关文章

  1. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  2. Js 中的事件委托/事件代理

    什么叫事件委托/事件代理呢 ? JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.   事件冒泡: 当事件发生后,这个事件就要开始传 ...

  3. 理解js事件冒泡事件委托事件捕获

    js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...

  4. JavaScript中事件委托(事件代理)详解

    在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托 ...

  5. 【JS】怎样用原生JS实现jQuery的ready方法

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window. ...

  6. 原生js实现preAll和nextAll方法

    一直以来都在好奇,jquery的prevAll和nextAll方法都是咋实现的,那么厉害,而且还那么方便.不得不说,jquery真的帮我们省去了开发中手写大量js代码带来的开发进度问题,而且很好的解决 ...

  7. jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载

    jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...

  8. JS中的事件委托/事件代理详解

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  9. js 事件委托 事件代理

    JavaScript高级程序设计上解释:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 通过例子类比: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三 ...

  10. JS事件委托(代理)学习笔记

    在开始之前我们先来熟悉一下HTML DOM addEventListener()方法,该方法用于向指定元素添加事件句柄.语法说明如下图所示: 主要想强调一下第三个参数useCapture,默认值为fa ...

随机推荐

  1. DevOps之持续集成Jenkins+Gitlab

    一.什么是DevOps DevOps(英文Development(开发)和Operations(技术运营)的组合)是一组过程.方法与系统的统称,DevOps是一组最佳实践强调(开发.运维.测试)在应用 ...

  2. #419 Div2 Problem B Karen and Coffee (统计区间重叠部分 && 前缀和)

    题目链接 :http://codeforces.com/contest/816/problem/B 题意 :给出 n 表示区间个数,限定值 k 以及问询次数 q,当一个数被大于或等于 k 个区间重复覆 ...

  3. RPN

    训练: 特征图是51x39x256,对该图像的每点考虑9个窗口:三种候选面积(128,256,512) x 三种尺度(1:1,1:2,2:1).这些候选窗口称为anchors.如下图: 如果图片尺寸w ...

  4. Linux shell - 除法保留小数点

    我想实现 举例:1/3=0.33得到0.33, 尝试过bc 只能得到.33,没有0了, linux 下的shell脚本,1和3是变量$a和$b,并能指定小数点后的位数, 方法1: $> res= ...

  5. 使用http-server在本地搭建一个HTTP服务器

    安装http-server 在控制台中输入 npm install http-server -g 进行全局安装 共享资源 进入需要共享资源的目录,比如 D:\,然后在控制台中输入 http-serve ...

  6. 卡死浏览器使IPhone的自带safari打开重启的JS循环代码

    <html> <body> <script> var total=""; for (var i=0; i < 1000000; i++) ...

  7. java中FastJson的json类型转换

    JSON Gson: 来自Google,功能全面.快速.简洁.面向对象.数据传递和解析方便. Jackson:来源FasterXML项目,社区活跃,更新快 解析速度和效率比Gson快,但无法按需解析, ...

  8. 洛谷P5022&P5049 旅行(及其数据加强版)

    旅行(不是加强版) 加强版 加强版数据范围: 我们注意到 也就是说要么是个树,要么是个基环树 60pts 这60分是个树,可以简单的贪心想到每次都走子树中编号最小的那个,并且把1作为根 dfs练手题 ...

  9. hibernate更新

    1.使用对象更新 public void updateImagePath(Weibo weibo){ Session session = HibernateUtil.currentSession(); ...

  10. Spring+hibernate 配置实例

    转自:http://www.cnblogs.com/hongten/archive/2012/03/10/java_spring_hibernate.html 项目结构: http://www.cnb ...