Question

我发现以下jQuery .on（）的表示/样式更可取（即移交可包含多个事件/回调的普通对象）：

$( selector ).on( {  mouseover:function(event) {
                       console.log('mouseover');
                     },
                     mouseout:function(event) {
                       console.log('mouseout');
                     }
                   });

但是我希望mouseover和focus都引用相同的功能，所以我尝试了以下内容：

$( selector ).on( {  'mouseover, focus':function(event) {
                       console.log('over/focus');
                     },
                     'mouseout, focusout':function(event) {
                       console.log('mouseout/focusout');
                     }
                   });

结果是焦点和焦点工作但不是鼠标悬停/鼠标移除。

有人可以指导我如何在普通对象中执行此操作，即使用此结构/样式使用.on（）

非常感谢提前

Answer 1

来自the documentation：

一个对象，其中字符串键表示一个或多个空格分隔的事件类型和可选的命名空间，值表示要为事件调用的处理函数。

（我的重点）

失去逗号：

$( selector ).on( {  'mouseover focus':function(event) {
// No comma -------------------^
                       console.log('over/focus');
                     },
                     'mouseout focusout':function(event) {
// No comma ------------------^
                       console.log('mouseout/focusout');
                     }
                   });

当然，也可以使用命名函数。

以下是使用彼此无关的事件（为清晰起见）的示例：

$("#the-element").on({
  "change click": function(e) {
    $("<p>").text("Got " + e.type).appendTo(document.body);
  }
});

<input type="text" id="the-element">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

jQuery：.on（）使用普通对象中的事件来引用一个函数

1 个答案: