如何从表头的反应onClick事件中获取event.target.name（th）

Question

我的表头中有一个onClick事件，用于对表进行排序。我需要将表头 html 元素名称传递给我的 onclick 处理程序。

处理程序的简化版本如下所示：

html：

<table>
  <tbody>
    <tr>
      <th name='name' value='test' onClick=onClickhandler(event)> Click me </th>
    </tr>
  </tbody>
</table>

js：

  onClickhandler = event => {
      console.log("Event target name = " + event.target.name);
  }

https://jsfiddle.net/vaf5sutn/4/

问题

上面的代码作为日志返回Event target name = undefined。

预期的

控制台日志应该返回 Event target name = name

Answer 1

您可以从 更改event.target.name为event.target.getAttribute('name')

 onClickhandler = event => {
    console.log("Event target name = " + event.target.getAttribute('name'));
  }

 <table>
    <tbody>
      <tr>
         <th name='name' value='test' onClick=onClickhandler(event)>Click me</th>
      </tr>
    </tbody>
  </table>