前端面试js-手写事件委托（一点小改进）

最近刚好在学js的事件机制，写这个是看到这篇文章提到了一个腾讯的面试题。我先把文章的代码稍作改动贴在这里。

<body><div id="outer" style="width:100%; height:200px; background-color: cornflowerblue;"><div style="width:200px; height: 150px; background-color: pink;" id='middle'><div style="width:100px; height: 100px; background-color: yellowgreen;" id="inner"></div></div></div><script>function delegateEvent(interfaceEle, selector, type, fn) {if(interfaceEle.addEventListener) {interfaceEle.addEventListener(type, eventfn, false);} else {interfaceEle.attachEvent("on" + type, eventfn);}function eventfn(e) {var e = e || window.event;var target = e.target || e.srcElement;if(matchSelector(target, selector)) {if(fn) {fn.call(target, e);}}}}function matchSelector(ele, selector) {// if use idif(selector.charAt(0) === "#") {return ele.id === selector.slice(1);}// if use classif(selector.charAt(0) === ".") {return(" " + ele.className + " ").indexOf(" " + selector.slice(1) + " ") != -1;}// if use tagNamereturn ele.tagName.toLowerCase() === selector.toLowerCase();}//调用var outer = document.getElementById("outer");var middle = document.getElementById("middle");delegateEvent(outer, "#middle", "click", function() {console.log('test');})</script></body>作者：一只dororo
链接：https://www.jianshu.com/p/7ea01a3beb7a
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

显示效果如图：

但是这段代码有一个小问题：用鼠标点击绿色方块，不会输出‘test’,这仿佛违背了我们希望事件冒泡的初衷。
这是由于在绑定的时候，很关键的一个地方在eventfn函数，它限制了只有当target就是selector匹配的元素时，才会调用handler。
而事实上我们在调用这个函数的时候，target是selector匹配到的元素的子节点也可以。
在这里介绍一个新的api,parent.contains(node),他返回一个布尔值，判断node是不是parent节点的后代或parent本身。
因此我们修改代码为：

function delegateEvent(interfaceEle, selector, type, fn) {if(interfaceEle.addEventListener) {interfaceEle.addEventListener(type, eventfn, false);} else {interfaceEle.attachEvent("on" + type, eventfn);}function eventfn(e) {var $selector = document.querySelector(selector);var e = e || window.event;var target = e.target || e.srcElement;if(contain($selector, target)) {if(fn) {fn.call(target, e);}}}
}function contain(parent, node) {if (parent.contains) {return parent.contains(node)} else { //兼容不支持contains方法的浏览器while (node) {if (node === parentNode) {return true;} else {node = node.parentNode;}}return false;}
}

现在再点击绿色方块也可以打印'test'啦。

前端面试js-手写事件委托（一点小改进）相关推荐

前端面试高频手写代码题
前端面试高频手写代码题一.实现一个解析URL参数的方法方法一:String和Array的相关API 方法二: Web API 提供的 URL 方法三:正则表达式+string.replace方法 ...
前端面试：手写代码JS实现字符串反转
前端萌新面试:手写代码JS实现字符串反转前言因为做前年小红书的前端校招面试题,发现出现好几道关于字符串对象和数组对象的题目,说难不难,但突然要写的话一时想不起来,这不想着做个小总结. 首先明白字符 ...
前端面试高频手写题目
高频手写题目面试高频手写题目 1 实现防抖函数(debounce) 防抖函数原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时手写简化版: // func是用户传入需要防抖的函 ...
前端面试之手写代码篇
手写代码 1.手写instanceof方法 2.手写new操作符 3.手写Promise.all() 4.手写防抖函数 5.手写节流函数 6.手写call.apply函数 7.手写bind函数 8.封 ...
2020年前端面试之JS手写代码题合集
2020年前端面试之JS手写代码题合集预计会有上千道题,后续慢慢补! 1. 写一个把字符串大小写切换的方法 function caseConvert(str){return str.replace ...
前端面试 - JS总结（1） - 基础 (数据类型, 事件与函数, 原型链)
你不走出舒适圈,又怎么知道自己多坚强?! 前端面试 - JS总结(1) - 基础 (数据类型, 事件与函数, 原型链) 前端面试 - JS总结(2) - ES6 (let, 箭头函数, this) 前 ...
2021年的几次面试让我死磕了17道JS手写题！
1.浅拷贝.深拷贝的实现浅拷贝 // 1. ...实现 let copy1 = {...{x:1}}// 2. Object.assign实现 let copy2 = Object.assign({ ...
【面试】970- 一文帮你搞定90%的JS手写题
还在害怕手写题吗,本文可以帮你扩展并巩固自己的JS基础,顺便搞定90%的手写题.在工作中还可以对常用的需求进行手写实现,比如深拷贝.防抖节流等可以直接用于往后的项目中,提高项目开发效率.不说废话了,下 ...
JS 面试问题: 手写 new
JS 面试问题: 手写 new
用 Node.js 手写一个 DNS 服务器
DNS 是实现域名到 IP 转换的网络协议,当访问网页的时候,浏览器首先会通过 DNS 协议把域名转换为 IP,然后再向这个 IP 发送 HTTP 请求. DNS 是我们整天在用的协议,不知道大家是否 ...

前端面试js-手写事件委托（一点小改进）

前端面试js-手写事件委托（一点小改进）相关推荐

最新文章

热门文章