如何与事件相结合的一个对象的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