原生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. ef 分页

    public List<TEntity> FindList(Expression<Func<TEntity, bool>> predicate, Paginatio ...

  2. jquery first选择器 语法

    jquery first选择器 语法 作用::first 选择器选取第一个元素.最常见的用法:与其他元素一起使用,选取指定组合中的第一个元素(就像上面的例子).直线电机滑台 语法:$(":f ...

  3. Codeforces 960F Pathwalks ( LIS && 树状数组 )

    题意 : 给出若干个边,每条边按照给出的顺序编号,问你找到一条最长的边权以及边的编号同时严格升序的一条路径,要使得这条路径包含的边尽可能多,最后输出边的条数 分析 :  这题和 LIS 很相似,不同的 ...

  4. (四)mysql -- 常用函数

    今天get一个,先记录一下 以后慢慢补充~ 将varchar转换成int 例如:select * from tb_1 order by cast(sport_sum as unsigned integ ...

  5. sqli-lab(8)

    布尔型单引号GET盲注 发现加个单引号跟没加显示不一样,加了单引号连you are in都不显示了,没有报错,所以只能用盲注判断了 0X01爱之先了解 盲注需要掌握一些MySQL的相关函数:lengt ...

  6. vim编辑器快捷键

    光标控制命令 命令 光标移动 h或^h 向左移一个字符 j或^j或^n 向下移一行 k或^p 向上移一行 l或空格 向右移一个字符 G 移到文件的最后一行 nG 移到文件的第n行 w 移到下一个字的开 ...

  7. Flask基础以及Response三剑客

    Flask的特点: 优点:小而精.三方组件全    缺点: 性能相对较差   因为依赖三方组件所以在更新的时候难免不同步 基础模板 from flask import Flask app = Flas ...

  8. GET,POST传值总结

    GET和POST是什么?HTTP协议中的两种发送请求的方法. HTTP是什么?HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议. 其实,GET和POST本质上两者没有任何区别.他们都是 ...

  9. Mac上的应用,例如Xcode需要输入原始下载账号才能更新问题

    为了免下载安装Xcode,安装时使用了别人提供的Xcode.dmg安装,或者公司接管上任同事使用的Mac时,上面的应用都是用别人的账号购买下载的,而非使用自己账号在AppStore下载的. 这样的安装 ...

  10. Delphi XE2 之 FireMonkey 入门(40) - 控件基础: TMemo

    Delphi XE2 之 FireMonkey 入门(40) - 控件基础: TMemo 值得注意的变化: 1.其父类 TScrollBox 的许多特性也很有用处, 如:   Memo1.UseSma ...