摘要：最近刚好在学的事件机制，写这个是看到这篇文章提到了一个腾讯的面试题。显示效果如图但是这段代码有一个小问题用鼠标点击绿色方块，不会输出这仿佛违背了我们希望事件冒泡的初衷。在这里介绍一个新的他返回一个布尔值，判断是不是节点的后代或本身。
最近刚好在学js的事件机制，写这个是看到这篇文章提到了一个腾讯的面试题。我先把文章的代码稍作改动贴在这里。
作者：一只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"啦。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/98074.html
摘要：背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多，投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗，待遇工 背景 个人背景 就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习 前端方向，自学，vue技术栈 时间背景 大概是在11月9日准备...
摘要：背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多，投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗，待遇工 背景 个人背景 就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习 前端方向，自学，vue技术栈 时间背景 大概是在11月9日准备...
答案自己谷歌或百度找。 一、来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。 二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...
答案自己谷歌或百度找。 一、来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。 二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...
答案自己谷歌或百度找。 一、来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。 二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...
阅读 2072·2023-04-25 17:23
阅读 2886·2021-11-17 09:33
阅读 2472·2021-08-21 14:09
阅读 3488·2019-08-30 15:56
阅读 2566·2019-08-30 15:54
阅读 1589·2019-08-30 15:53
阅读 2082·2019-08-29 13:53
阅读 1100·2019-08-29 12:31
