如果我提到最外面的选择器，为什么不进行事件委托？

Question

假设我通过在目标名称中提到最外面的选择器来委托mouseover事件：

＆＃13;

＆＃13;

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

  console.log("YES");

});

＆＃13;

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

＆＃13;

<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>  

＆＃13;

＆＃13;

＆＃13;

在$(".outer").on("mouseenter", " .outer .inner",...如果我在.outer中没有提到.outer .inner，那么代码就像：

＆＃13;

＆＃13;

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

  console.log("YES");

});

＆＃13;

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

＆＃13;

<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>  

＆＃13;

＆＃13;

＆＃13;

现在您可以在控制台中看到mouseenter事件正常工作。但它在第一个例子中不起作用吗？ Donn＆＃t; t .outer .inner和.inner选择相同的DOM元素？

Answer 1

从jQuery文档中，您传入的选择器是：

  

用于过滤所选元素后代的选择器字符串   触发事件

所以.outer .inner不起作用，因为 内部 触发事件的

。