标签：闭包 index target 自定义 添加 事件 执行 底层
事件委托底层执行
JS代码
// add-event-loop.js
document.body.onclick = function (ev) {
var target = ev.target;
targetDom = target.tagName;
if (targetDom === 'BUTTON') {
var index = target.getAttribute('index');
console.log(`当前点击的是第${index}个`);
}
}
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环添加事件</title>
</head>
<body>
<button index="1">按钮1</button>
<button index="2">按钮2</button>
<button index="3">按钮3</button>
<script src="./add-event-loop.js"></script>
</body>
</html>
底层执行分析
循环添加事件底层执行分析、原理分析，闭包及其可能的负面影响、自定义属性思想解决
-
图示1 - 初始化
-
图示2 - 与闭包、自定义属性方式比较
相比闭包思想、自定义属性，使用事件委托不需要开辟很多内存空间
-
图示3 - 明细
1：开辟内存空间存放匿名函数
2：匿名函数进栈执行
执行体中判断目标元素是否是“button”，如果是则打印输出
执行完成后出栈释放空间
标签：闭包,index,target,自定义,添加,事件,执行,底层 来源： https://blog.csdn.net/qq_39357822/article/details/119086068
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。