如何與事件相結合的一個對象的jQuery

Question

指定目標元素當我要指定一個目標元素爲一個jQuery的事件，我不喜歡這樣寫道：

$(".foo").on("click", ".foo-child", function(...)); 

哪裏.foo-child是我的目標元件。但是，如何爲一個對象中的多個事件指定目標元素？

$(".foo").on({ 
    click: function(...), 
    hover: function(...), 
    focus: function(...) 
}); 

Answer 1

您可以將動態元素選擇通過像

$(".foo").on({ 
 
    click: function() { 
 
    snippet.log('click') 
 
    }, 
 
    mouseenter: function(e) { 
 
    snippet.log('mouseenter ') 
 
    }, 
 
    mouseleave: function(e) { 
 
    snippet.log('mouseleave ') 
 
    }, 
 
    focus: function() { 
 
    snippet.log('focus') 
 
    } 
 
}, '.foo-child');

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="foo"> 
 
    <div class="foo-child">1</div> 
 
    <div class="foo-child">2</div> 
 
    <div class="foo-child">3</div> 
 
</div>

Answer 2

我怎麼指定幾個事件組合在一個對象目標元素的第二個參數？

有沒有必要做一個調用on和指定多個不同的事件+目標對你只需調用使用on多次鏈接：

$(".foo") 
    .on("click", ".foo-child-click", function(...)) 
    .on("hover", ".foo-child-hover", function(...)) 
    .on("focus", ".foo-child-focus", function(...)); 

您可以對每個事件指定多個目標，例如：

$(".foo") 
    .on("click", ".foo-child-click,.foo-child-hover,.foo-child-focus", function(...)) 

Answer 3

使用下面的代碼：

$("foobar").on({ 
    mouseenter: function() { 

    }, 
    mouseleave: function() { 

    }, 
    click: function() { 

    } 
}, "body"); 

Answer 4

貌似我忘記了在以前的評論中的處理器和選擇。這是工作小提琴。

https://jsfiddle.net/1jzwsn3z/here