多元素同id时的事件绑定
2019-08-02 本文已影响0人
来碗鸡蛋面
原创声明
本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666
问题分析：
id作为识别元素的唯一标识，从语义上讲不应该出现共用现象，实际操作中如果有多个元素共用id也会造成意料之外的问题。
项目结构简单时，这样的错误一般不会出现，但是在结构复杂，又有大量重复功能出现时容易出现id重复现象。
实际操作中，今天有发现一个功能异常，A处和B处功能相同，而且A和B的父页面默认隐藏，都通过对应的点击事件触发弹窗显示，A处和B处的功能时好时坏，最终排查为id重复导致的，项目代码因为不能放出来，所以写了如下小demo来展示这个问题。
问题答案：
多元素同id时的事件绑定只在第一个元素生效
示例代码：
<html lang="zh-en">
<head>
</head>
<body>
<div id="tom">tom1</div>
<div id="tom">tom2</div>
<div id="tom">tom3</div>
<script>
var tom = document.getElementById('tom');
tom.onclick = function() {
console.log(tom);
// 点击tom1时输出 <div id="tom">tom1</div>
// 其他两个元素不触发该事件
}
</script>
</body>
</html>
