原生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. 【转】Python Schema一种优雅的数据验证方式

    转自 https://segmentfault.com/a/1190000011777230 Schema是什么? 不管我们做什么应用,只要和用户输入打交道,就有一个原则--永远不要相信用户的输入数据 ...

  2. MySQL_DML操作

    DML(Data Manipulation Laguage)指对数据库数据的增(Create)删(Delete)改(Update)操作 1.增加操作 (1)先创建一个表,如图所示: 语法:Insert ...

  3. SQL模糊查询报:ORA-00909:参数个数无效

    用oracle数据库进行模糊查询时,控制台报错如下图所示: 原因是因为敲的太快,语法写错了 正确的写法是 pd.code like concat(concat('%',#{keyword}),'%')

  4. [design pattern](7) Singleton

    前言 上面的章节中,我们介绍了工厂模式,它是创建型模式的一种.本章我们将会介绍 单例模式 ,它也是创建型模式的一种.单例模式是我们比较常用的一个设计模式,也是最简单的一种设计模式. 单例模式 介绍:确 ...

  5. Apache配置详解(最好的APACHE配置教程)

    From: http://aiks.blog.com.cn/archives/2006/1748482.shtml Apache的配置 Apache的配置由httpd.conf文件配置,因此下面的配置 ...

  6. Http请求详解(转)----请求+响应各字段详解

    参考HTTP深入浅出http请求(转)-----http请求的过程和实现机制 1. HTTP请求格式 首先介绍HTTP协议:超文本传输协议(HTTP,HyperText Transfer Protoc ...

  7. css实现不定宽高的div水平、垂直居中

    一共有三个方案: 1,第一种方案主要使用了css3中transform进行元素偏移,效果非常好 这方法功能很强大,也比较灵活,不仅仅局限在实现居中显示.  兼容方面也一样拿IE来做比较,第二种方法IE ...

  8. List of Mozilla-Based Applications

    List of Mozilla-Based Applications The following is a list of all known active applications that are ...

  9. json-server 服务器的接口

    服务器接口的数据在浏览器网络地址中,便可查看: 获取接口的数据需要在网络地址后面,填写接口的名字即可,(对于 json-server来说)

  10. acl权限设置

    acl权限分配 1.setfacl设置文件或目录的权限 setfacl -m u:user:rw text setfacl -m user:rwx /mnt 2.getfacl查看文件或目录的权限 g ...