一番外側のセレクタについて言えば、なぜイベント委任が機能しないのですか？

Question

私のようにターゲット名での最も外側のセレクタを挙げて委任mouseoverイベントにすると仮定します。

：私は .outer .innerで .outerを言及していない場合は

$(".outer").on("mouseenter", " .outer .inner",...で

$(".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", ".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要素を選択しないでください。 jQueryのドキュメントから

Answer 1

は、あなたが渡すセレクタは次のとおりです。

セレクタ文字列が

だから.outer .innerが動作しないイベントをトリガし、選択した要素 の子孫をフィルタリングするために、そのような要素が存在しないので、の中にはのイベントがトリガーされる.outerがあります。