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

Question

我在表头中有一个onClick事件，我用它来排序表。我需要传递给我的onclick处理程序的表头html元素名称。

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

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>