原生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. MySQL错误日志显示(Got an error reading communication packets)的问题

    错误显示: 2019-05-28T12:54:08.267934+08:00 820396 [Note] Aborted connection 820396 to db: 'Databaseplatf ...

  2. $.param()序列化对象

    1.$.param(): param() 方法创建数组或对象的序列化表示形式. 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中. 第一行是原始数据,第二行是序列化后的.$.param( ...

  3. aspose 模板输出

    Dictionary<string, string> dictionnaryBig = new Dictionary<string, string>(); dictionnar ...

  4. java+web+批量下载文件

    JavaWeb 文件下载功能 文件下载的实质就是文件拷贝,将文件从服务器端拷贝到浏览器端,所以文件下载需要IO技术将服务器端的文件读取到,然后写到response缓冲区中,然后再下载到个人客户端. 1 ...

  5. sh_05_函数的参数

    sh_05_函数的参数 def sum_2_num(num1, num2): """对两个数字的求和""" # num1 = 10 # nu ...

  6. 3-Gitblit服务器搭建及IDEA整合Git使用

    背景:虽然有GitHub.GitLab这样强大的Git仓库,但是涉及私有Git库要收费,所以自己动手搭建免费的用用 环境:windows 7 旗舰版.JDK 1.8.IDEA 2017 ------- ...

  7. pymysql 处理数据的几种方式

    1.表中提取数据 sql = "SELECT * FROM table WHERE name='%s'AND time='%s'" % (name,time)多个选择条件用AND连 ...

  8. Deepin 系统下设置Apache虚拟主机站点

    1,在 var/www/html 文件夹中创建一个文件夹,命名为 a ,用来作为我们的PHP项目文件夹. 2,找到 etc/apache2/sites-available 文件夹,在文件夹中创建一个站 ...

  9. leetcode-easy-array-31 three sum

    mycode  69.20% class Solution(object): def removeDuplicates(self, nums): """ :type nu ...

  10. Django信号量

    摘自官方文档 使用 信号 Django发送的所有信号的列表.使用该send()方法发送所有内置信号. 参见 有关如何注册和接收信号的信息,请参阅信号调度器上的文档. 用户登录/注销时,身份验证框架会 ...