如何获取被点击段落的内容？解决点击段落返回首段内容问题

嘿，问题很明显啦——你现在的代码不管点哪个段落，都硬邦邦地取了第一个<p>元素的内容（document.getElementsByTagName('p')[0]），难怪点第5个还是输出1！咱们来改改，有几种简单的方法：

方法1：利用事件对象的target属性 #

事件处理函数会自动接收一个事件对象，里面的target就是触发事件的那个元素（也就是你点击的段落）。修改函数如下：

// 先声明一个数组用来存内容
let contentArray = [];

function readValue(event) {
  // 拿到点击的段落内容
  var text = event.target.innerHTML;
  console.log(text);
  // 存入数组
  contentArray.push(text);
}

然后给每个段落绑定点击事件的时候，要把事件对象传进去：

<!-- 每个p标签这样写 -->
<p onclick="readValue(event)">1</p>
<p onclick="readValue(event)">2</p>
<!-- ...直到10 -->

方法2：用this关键字指向触发元素 #

在事件处理函数里，this默认指向触发事件的DOM元素，这样更简洁，还能把JS和HTML代码分开：

let contentArray = [];

function readValue() {
  var text = this.innerHTML;
  console.log(text);
  contentArray.push(text);
}

// 页面加载完成后，给所有p标签绑定点击事件
window.onload = function() {
  const allParagraphs = document.getElementsByTagName('p');
  for (let i = 0; i < allParagraphs.length; i++) {
    allParagraphs[i].addEventListener('click', readValue);
  }
};

方法3：事件委托（更高效，适合动态添加段落的场景） #

如果之后可能会动态添加新的段落，不用给每个段落单独绑定事件，把点击事件绑定到它们的父元素上（比如body或者某个容器），通过判断触发元素的标签来处理：

let contentArray = [];

// 绑定到父元素（这里用body举例）
document.body.addEventListener('click', function(event) {
  // 确认点击的是p标签
  if (event.target.tagName === 'P') {
    var text = event.target.innerHTML;
    console.log(text);
    contentArray.push(text);
  }
});

这种方法只需要绑定一次事件，不管之后加多少个p标签，点击都能生效。

内容的提问来源于stack exchange，提问作者Vajda Zoli