如何从表头的响应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> 

Answer 2

试试这个解决方案

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