javascript - 如果我提到最外面的选择器，为什么事件委托(delegate)不起作用？

Question

假设我通过将目标名称中最外层的选择器提及为来委托(delegate)鼠标悬停事件:

$(".outer").on("mouseenter", ".outer .inner", function() {

  console.log("YES");

});

.outer {
  background: green;
  padding: 20px;
}
.inner {
  padding: 10px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <span class="inner">
    Hover
  <span>  
</div>  

在 $(".outer").on("mouseenter", ".outer .inner",... 中如果我没有提到 .outer .outer .inner 那么代码的工作方式如下:

$(".outer").on("mouseenter", ".inner", function() {

  console.log("YES");

});

.outer {
  background: green;
  padding: 20px;
}
.inner {
  padding: 10px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <span class="inner">
    Hover
  <span>  
</div>  

现在，正如您在控制台中看到的，mouseenter 事件起作用了。但在第一个例子中它不起作用吗？ .outer .inner 和 .inner 没有选择相同的 DOM 元素吗？

Answer 1

根据 jQuery 文档，您传入的选择器是:

A selector string to filter the descendants of the selected elements that trigger the event

因此 .outer .inner 不起作用，因为触发事件的 .outer 内部不存在这样的元素。