如果我提到最外层的选择器，为啥事件委托不起作用？

Posted 2023-05-09

【中文标题】如果我提到最外层的选择器，为啥事件委托不起作用？

【英文标题】：Why don't event delegation work if I mention the outermost selector?如果我提到最外层的选择器，为什么事件委托不起作用？

【发布时间】：2017-05-29 18:14:42

【问题描述】：

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

$(".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 .inner 中没有提到.outer，那么代码的工作方式为：

$(".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 元素？

【问题讨论】：

简单地省略第二个参数：$(".outer").on("mouseenter",function...

【参考方案1】：

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

一个选择器字符串来过滤被选元素的后代 触发事件

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