使用事件代理完成创建多个a标签并绑定事件

事件代理和闭包综合运用

使用场景:需要创建多个元素并绑定同类型事件

代码如下:

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Test</title>
</head>
<body>
<div id="div1">
    <!-- 随时新增更多的 a 标签 --> 
</div>
<script type="tetx/javascript">
  let elem = document.getElementById('div1');
  for (let i = 0; i < 10; i++) {
      (function(i) {
        let temp = document.createElement('a');
        temp.innerHTML = i;
        elem.appendChild(temp);
        let temp2 = document.createElement('br');
        elem.appendChild(temp2);
      })(i);
  }
  elem.addEventListener('click', function(e) {
    e.preventDefault();
    if (e.target.nodeName === 'A') 
   console.log(e.target.innerHTML);
  });
</script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,904评论 18 139
  • 1.ios高性能编程 (1).内层 最小的内层平均值和峰值(2).耗电量 高效的算法和数据结构(3).初始化时...
    欧辰_OSR阅读 29,590评论 8 265
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,138评论 1 32
  • 昨天好热,而今天又差点儿冻死在了24楼的夏天里 每天总有无数的工作,感觉做不完无比压抑,那种没心没肺的日子似乎真的...
    雯慧阅读 398评论 0 1
  • 我妹妹,今年23岁,马上过年了,我妈十分着急,给她找了各式的相亲。刚开始,她还是很顺从她老人家的意思的,该见的见,...
    bf328d795906阅读 716评论 3 3