[问题探讨]多元素同id时的事件绑定

最新推荐文章于 2022-03-15 16:51:12 发布

tom_wong666

最新推荐文章于 2022-03-15 16:51:12 发布

阅读量572

点赞数

分类专栏：问题探讨文章标签： js id html

本文链接：https://blog.youkuaiyun.com/tom_wong666/article/details/97769661

版权

问题探讨专栏收录该内容

25 篇文章

订阅专栏

问题分析：

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>