Event.target.id返回空字符串？

Question

event.target.id属性在我的列表项事件点击处理程序中返回一个空字符串。为什么会这样？

$("ol").on("click", "li", function(event) {
 let id = event.target.id; // returns ""
});

我知道我可以使用id来获得列表项的$(this).attr("id")，但是我只是想知道为什么上面的代码为{{1}返回一个空字符串}？

event.target很可能是id，因为我没有在<li>和<ol>之间的DOM树中找到任何其他元素，而对此进行了一些反思：

Answer 1

您需要使用event.currentTarget

在下面的示例中，如果单击 abc ，则两个日志都将绘制2，但是，如果单击 def ，则将首先绘制日志''和第二个原木油漆2。

$("ol").on("click", "li", function(event) {
  console.log(event.target.id);
  console.log(event.currentTarget.id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ol>
    <li id="2">
      abc
      <span>def</span>
    </li>
  </ol>

</div>

Answer 2

事件目标不一定是<li>元素。事件使DOM树冒泡。

因此进入：

<ol>
  <li>
    <span>Hello World!</span>
</ol>

单击文本将触发事件处理程序，但目标将是<span>，而不是<li>。

您正在使用jQuery，因此只需参考this。该库将this安排为对与处理程序设置方式相关的元素的引用。

$(function() {
  $("ol").on("click", "li", function(event) {
    console.log("event target: ", event.target);
    console.log("this.id: ", this.id);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
  <li id="the-li-element">
    <span id="the-span-element">Hello World!</span>
</ol>

还请注意，最终，只有元素实际上具有id 时，您才会获得其id属性的值。浏览器并没有为DOM中的所有内容组成id属性。