如何为不同ID的元素调用同一方法？多p元素点击改文本实现

嘿，我来给你捋捋怎么搞定这个需求——不用给每个p元素单独写处理方法，有两种很实用的方式：

方法一：批量选中所有p元素，循环绑定事件 #

这种方式适合元素数量不多的场景，我们可以用document.querySelectorAll('p')选中所有p标签，然后遍历它们，给每个都绑定同一个点击事件处理函数，实现逻辑复用。

完整代码示例：

<!DOCTYPE html> 
<html> 
<body> 
<p>本示例使用HTML DOM为p元素绑定"onclick"事件。</p> 
<p id="demo">点击我。</p> 
<p id="demo2">点击我。</p> 
<script> 
// 选中页面中所有p元素
const allParagraphs = document.querySelectorAll('p');

// 定义统一的点击处理函数
function changeText(event) {
  // event.target指向被点击的那个p元素
  event.target.textContent = '我被点击啦！';
}

// 循环给每个p元素绑定点击事件
allParagraphs.forEach(p => {
  p.onclick = changeText;
});
</script>
</body> 
</html>

方法二：利用事件委托（更推荐） #

如果后续可能会动态添加p元素，事件委托会更合适——我们给这些p元素的父元素（比如这里的body）绑定一个点击事件，通过判断点击的目标是不是p元素，再执行修改文本的逻辑。这样不管是现有还是新增的p元素，都能触发效果，而且只需要绑定一次事件，性能更优。

完整代码示例：

<!DOCTYPE html> 
<html> 
<body> 
<p>本示例使用HTML DOM为p元素绑定"onclick"事件。</p> 
<p id="demo">点击我。</p> 
<p id="demo2">点击我。</p> 
<script> 
// 给父元素绑定点击事件，利用事件冒泡特性
document.body.onclick = function(event) {
  // 判断点击的目标是否为p元素（注意tagName返回的是大写）
  if (event.target.tagName === 'P') {
    event.target.textContent = '我被点击啦！';
  }
};
</script>
</body> 
</html>

两种方法的核心都是复用同一个处理逻辑，不用给每个p元素单独编写绑定代码，完美解决你的需求～

内容的提问来源于stack exchange，提问作者Nice Mice