如何使用事件对象使用 Javascript 更改 HTML 文本 [重复]

【问题标题】：How to change HTML text with Javascript using event object [duplicate]如何使用事件对象使用 Javascript 更改 HTML 文本 [重复]
【发布时间】：2020-01-23 13:10:29
【问题描述】：

我不明白为什么 e.target.name 显示 undefined 即使 e.target 返回节点。如何使用事件对象简单地更改文本？

function changeText(e) {
  console.log(e.target, e.target.name);
  
  switch (e.target.name) {
    case 'fooBar':
      e.target.innerHTML = 'bar';
      break;
  }
}

<div>
  <p name="fooBar" onclick="changeText(event)">foo</p>
</div>

【问题讨论】：

HTMLParagraphElement 没有 name 属性。此外，name 属性对于<p> 元素是无效。请改用data-name="fooBar" 并使用event.target.dataset.name 访问它。

标签： javascript html

【解决方案1】：

function changeText(e) {
    console.log(e.target.getAttribute('name'));
    switch (e.target.getAttribute('name')) {
    case 'fooBar':
        e.target.innerHTML = 'bar';
        break;
    }
}

e.target 是一个 html 节点，所以你必须使用 DOM api 来获取属性

【讨论】：

感谢您的解决方案。我仍然有点困惑，为什么 e.target.someAttribute 在我的网页附加到 img 标签时似乎可以正常工作，但当它来自 p 标签时却不行。很奇怪
取决于你在说什么属性，例如Id 和className 可以工作，但name 不行。将e.target 视为具有公共id 和className 属性的js 类，但例如name 是私有的，要获得它，您应该调用实例方法。