例如：
HTML：
9
646
js(1):
document.getElementById("p_1").addEventListener("click",function(){
// 对p_1的操作
});
document.getElementById("p_2").addEventListener("click",function(){
// 对p_2的操作
});
若利用冒泡。以上js(1)的实现也可以写成
js(2):
document.body.addEventListener("click",function(e){
if(e.target.id == "p_1"){
// 对p_1的操作
}else if(e.target.id == "p_2"){
// 对p_2的操作
}
});
对于js(1)和js(2)，实际使用是否有差异，若有，两者哪个更优？
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
对于复杂的网页结构来说，第一种性能更加，原生的getElementById获取对象是很快的；第二种虽然方便，减少了代码量，但是牺牲了性能，这实际上是一种事件委托，当你点击p1或者p2的时候，它都会去遍历dom数，寻找委托对象。
作为js小白的我喜欢js(1). 仅仅是因为觉得这样漂亮。
根据场景选择吧，针对js（2）不如给p添加class一个循环添加点击事件，还可以少了判断，性能会更好
js(1) 一次性绑定的时候比较好。
js(2) 比如你默认有3个元素带有class="a"绑定某个事件，而你再追加的时候第4个class="a"的元素是不会触发事件的，这时用(2)方便处理。
根据javascript高级程序设计中提高：
1、使用stoppropagation阻止事件冒泡
2、使用事件委托，其原理就是在父节点中添加事件，尽可能的使事件冒泡层次少。
这就是事件委托。很常用的。
委托有好处就是：当你触发的元素经常回add 和 remove时， 将事件绑定到父节点，就不用考虑子元素的add，remove。
有个不好的地方就是如果子元素执行了事件并禁止冒泡， 父节点是不会执行事件的。
JS中利用冒泡原理进行的事件委托；
可以去参看jQuery的两个函数：
.bind(eventType, fn) 和 on(eventType [, target], fn)
了解他们之间的区别；
.bind() 必须要元素存在才能进行事件绑定；
.on()可以利用事件冒泡原理进行事件处理, target可能还未创建；
在你举得例子的情况下我觉得两者性能差别不大，如果p数量多了，那采用事件委托性能提升就比较明细了。