手写事件代理函数 (Delegated function)
‘手写 ’ 这个词 ,面试是不是听过无数遍呢 !
今天我们来手写一个这样的事件委托函数 =》
function( parent, selector, type , handle) {}
你需要传递的参数分别是:
parent: 事件绑定的父级
selector: 选择器,
type: 事件类型
handle: 事件处理函数
写之前 先了解一下事件委托的概念:
它是通过事件冒泡机制,
即子元素上触发的事件会冒泡到父级上, 即父级也会触发该类型的事件,
通过父级触发的事件拿到事件源对象e.target 就可以 知道 真正触发事件的元素是什么。
举个例子, 一个ul 下面有 1000 个 li , 我们 要给 li 绑定 点击事件 , 如果给每个li都绑定一个
点击事件 会 大量占用 内存 , 不利于性能优化, 这种情况下 我们 只需要在ul上绑定一个点击事件,
通过class 或者 id 来识别每个li , 这样就大大减少了事件注册, 而且 再 有新增的li时 我们也无需再去注册点击事件
我们来写个小demo
HTML:
<ul id="parent">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
css:
.active{
background-color: green;
}
js:
const parent = document.getElementById('parent');
function changeColor() {
if (this.classList.contains('active')) {
this.classList.remove('active')
} else {
this.classList.add('active');
}
} function delegate(parent, selector, type, handle) { }
delegate(parent, 'li', 'click',changeColor);
我们要实现点哪个li , 哪个li就变成原谅色, 再次点击取消。并 做 浏览器的兼容
我们开始写 delegate函数:
function matchSelector(target, selector) {
if (selector.match(/^#/g)) { // 匹配以#开头的字符串
return target.id === selector.slice(1); // 截取#后面的字符串
}
if (selector.match(/^\./g)) { // . 要转义,匹配以点开头的字符转
return target.classList.contains(selector.slice(1))
}
return target.nodeName.toLowerCase() === selector; // 匹配标签
}
function delegate(parent, selector, type, handle) {
if (parent.addEventListener) {
parent.addEventListener(type, eventFn, false)
} else { // 兼容老IE
parent.attachEvent('on' + type, handle)
}
function eventFn(e) {
const event = e || window.event;
const target = event.target || event.srcElement;// 兼容老IE
if (matchSelector(target, selector)) {
if (handle) {
handle.call(target, e); // 让handle执行时的this指向target
}
}
}
}
效果:
手写事件代理函数 (Delegated function)的更多相关文章
- 依据ECMA规范,手写一个bind函数
Function.prototype.bind 函数,参见ECMA规范地址 如题,这次来实现一个boundFunction函数,不挂载在Function.prototype上,而是一个单独声明的函数. ...
- 手写简化版printf函数
2019.02.01更新:经同学提醒,myprintf函数应有返回值为输出的字符数. 期末的大作业,手写一个myprintf函数,支持如下一些操作. 也就是 % -(负号控制左右对齐) 数(控制字段 ...
- 前端面试手写代码——JS函数柯里化
目录 1 什么是函数柯里化 2 柯里化的作用和特点 2.1 参数复用 2.2 提前返回 2.3 延迟执行 3 封装通用柯里化工具函数 4 总结和补充 1 什么是函数柯里化 在计算机科学中,柯里化(Cu ...
- 【OpenCV学习笔记】之六 手写图像旋转函数---万丈高楼平地起
话说,平凡之处显真格,这一点也没错! 比如,对旋转图像进行双线性插值,很简单吧? 可,对我,折腾了大半天,也没有达到预期效果! 尤其是三个误区让我抓瞎好久: 1,坐标旋转公式. 这东西,要用 ...
- cs224d 作业 problem set2 (一) 用tensorflow纯手写实现sofmax 函数,线性判别分析,命名实体识别
Hi Dear Today we will use tensorflow to implement the softmax regression and linear classifier algor ...
- 手写map, filter函数
function map(arr, fn) { let newArr = []; for (let i = 0; i < arr.length; i++) { newArr[i] = fn(ar ...
- 常见的JS手写函数汇总(代码注释、持续更新)
最近在复习面试中常见的JS手写函数,顺便进行代码注释和总结,方便自己回顾也加深记,内容也会陆陆续续进行补充和改善. 一.手写深拷贝 <script> const obj1 = { name ...
- springmvc 动态代理 JDK实现与模拟JDK纯手写实现。
首先明白 动态代理和静态代理的区别: 静态代理:①持有被代理类的引用 ② 代理类一开始就被加载到内存中了(非常重要) 动态代理:JDK中的动态代理中的代理类是动态生成的.并且生成的动态代理类为$Pr ...
- 22 道高频 JavaScript 手写面试题及答案
实现防抖函数(debounce) 防抖函数原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时. 那么与节流函数的区别直接看这个动画实现即可. 手写简化版: // 防抖函数 cons ...
随机推荐
- Python HTTP库requests中文页面乱码解决方案!
http://www.cnblogs.com/bitpeng/p/4748872.html Python中文乱码,是一个很大的坑,自己不知道在这里遇到多少问题了.还好通过自己不断的总结,现在遇到乱码的 ...
- Hystrix 熔断机制原理
相关配置 circuitBreaker.enabled 是否开启熔断 circuitBreaker.requestVolumeThreshold 熔断最低触发请求数阈值 circuitBreaker. ...
- removeElement
Description: Given an array and a value, remove all instances of that value in place and return the ...
- Flask入门之触发器,事件,数据迁移
SQLAlchemy Core和SQLAlchemy ORM都具有各种各样的事件挂钩: 核心事件 - 这些在 Core Events中描述,并包括特定于连接池生命周期,SQL语句执行,事务生命周期以及 ...
- 第五章 MySQL函数
一.数学函数 (1) 绝对值函数:ABS(x) ABS(x) 用于返回 x 的绝对值 mysql> SELECT ABS(2), ABS(-2.3), ABS(-33); +--------+- ...
- TX2 安装 ROS 依赖库错误解决办法
一.更换ubuntu 16.04 更新源 1. 更新源 deb http://mirrors.ustc.edu.cn/ubuntu-ports/ xenial main multiverse rest ...
- C# 使用 SmtpClient.SendAsync 方法发送邮件失败,总是返回 Cancelled
问题: 调用 SmtpClient.SendAsync,在 SendCompleted 的回调函数里面总是获取到 e.Cancelled 为 true. 后来测试了一下,相同的代码,只是把 SmtpC ...
- pycharm的安装及用法
俗话说的好:"工欲善其事,必先利其器",程序员写代码,肯定不能在编译器里面写,这有一个全宇宙最好的python编译器,叫做pycharm ,他的优点呢,大家可以看一下: 优点:1, ...
- 【转】sentry 实时事件日志聚合平台
1.install postgreSQL(v9.6)2.pip install sentry(v8.13.0)3.sentry init #初始化配置文件 4.配置好postgreSQL 需要连接re ...
- MySQL 各类日志文件介绍
日志文件 1.错误日志 ErrorLog 错误日志记录了MyQLServer运行过程中所有较为严重的警告和错误信息,以及MySQLServer每次启动和关闭的详细信息. 在默认情况下,系统记录错误日志 ...