原生js事件委托(事件代理)方法扩展
原生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事件委托(事件代理)方法扩展的更多相关文章
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- Js 中的事件委托/事件代理
什么叫事件委托/事件代理呢 ? JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 事件冒泡: 当事件发生后,这个事件就要开始传 ...
- 理解js事件冒泡事件委托事件捕获
js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...
- JavaScript中事件委托(事件代理)详解
在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托 ...
- 【JS】怎样用原生JS实现jQuery的ready方法
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window. ...
- 原生js实现preAll和nextAll方法
一直以来都在好奇,jquery的prevAll和nextAll方法都是咋实现的,那么厉害,而且还那么方便.不得不说,jquery真的帮我们省去了开发中手写大量js代码带来的开发进度问题,而且很好的解决 ...
- jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载
jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...
- JS中的事件委托/事件代理详解
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
- js 事件委托 事件代理
JavaScript高级程序设计上解释:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 通过例子类比: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三 ...
- JS事件委托(代理)学习笔记
在开始之前我们先来熟悉一下HTML DOM addEventListener()方法,该方法用于向指定元素添加事件句柄.语法说明如下图所示: 主要想强调一下第三个参数useCapture,默认值为fa ...
随机推荐
- form表单细节
一.表单 表单<form> 标签用于为用户输入创建 HTML 表单 表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含 menus.textare ...
- php上传大文件
1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...
- Spring Cloud云架构 - commonservice-sso服务搭建(一)
前面几篇我们已经介绍了Spring Cloud和oauth2的知识点,今天我们要利用Spring Cloud和oauth2进行commonservice-sso服务搭建,本节我们只是搭建commons ...
- 6.Python缩进规则(包含快捷键)
和其它程序设计语言(如 Java.C 语言)采用大括号“{}”分隔代码块不同,Python 采用代码缩进和冒号( : )来区分代码块之间的层次. 在 Python 中,对于类定义.函数定义.流程控制语 ...
- Spring Data Jpa (四)注解式查询方法
详细讲解声明式的查询方法 1 @Query详解 使用命名查询为实体声明查询是一种有效的方法,对于少量查询很有效.一般只需要关心@Query里面的value和nativeQuery的值.使用声明式JPQ ...
- [CSP-S模拟测试]:Walker(数学)
题目传送门(内部题86) 输入格式 第一行$n$接下来$n$行,每行四个浮点数,分别表示变换前的坐标和变换后的坐标 输出格式 第一行浮点数$\theta$以弧度制表示第二行浮点数$scale$第三行两 ...
- mac osx终端批量删除文件
sudo su cd / find ./ -name "*.html" -exec rm -rf {} \; 注意 {}和\;之间有空格 find [目录名] -name &qu ...
- Jcaptcha组件和kaptcha组件实现验证码
- Gridview中显示的值根据数据库中带出的值作更改
前台页面对Gridview增加事件 OnRowDataBound="GridView1_RowDataBound"protected void GridView1_RowDataB ...
- git跟yum一样 linux下的命令使用和思想是类似的
git跟yum一样 linux下的命令使用和思想是类似的