jQuery多个事件触发相同的功能

Question

有没有一种方法有keyup,keypress,blur,和change事件调用同一个函数在一行或做我必须做的分别呢？

我遇到的问题是我需要使用数据库查找验证一些数据,并且希望确保在任何情况下都不会错过验证,无论是键入还是粘贴到框中.

Answer 1

您可以使用.on()将函数绑定到多个事件:

$('#element').on('keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

或者只是将函数作为参数传递给普通事件函数:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)

Answer 2

从jQuery 1.7开始,该.on()方法是将事件处理程序附加到文档的首选方法.对于早期版本,该.bind()方法用于将事件处理程序直接附加到元素.

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})

Answer 3

我正在寻找一种方法来获取事件类型,当jQuery一次监听多个事件时,谷歌把我放在这里.

那么,对于那些感兴趣的人,event.type我的回答是:

$('#element').on('keyup keypress blur change', function(event) {
    alert(event.type); // keyup OR keypress OR blur OR change
});

jQuery doc中的更多信息.

Answer 4

您可以使用bind方法将函数附加到多个事件.只需传递事件名称和处理函数,如下代码所示:

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

另一种选择是使用jquery api的链接支持.

Answer 5

如果您将相同的事件处理程序附加到多个事件,您经常遇到一次触发多个事件的问题(例如,用户在编辑后按Tab键; keydown,change和blur可能全部触发).

这听起来像你真正想要的是这样的:

$('#ValidatedInput').keydown(function(evt) {
  // If enter is pressed
  if (evt.keyCode === 13) {
    evt.preventDefault();

    // If changes have been made to the input's value, 
    //  blur() will result in a change event being fired.
    this.blur();
  }
});

$('#ValidatedInput').change(function(evt) {
  var valueToValidate = this.value;

  // Your validation callback/logic here.
});

Answer 6

我就是这样做的.

$("input[name='title']").on({
    "change keyup": function(e) {
        var slug = $(this).val().split(" ").join("-").toLowerCase();
        $("input[name='slug']").val(slug);
    },
});

Answer 7

您可以定义要重用的函数,如下所示:

var foo = function() {...}

之后你可以在对象上设置你想要的许多事件监听器,使用on('event')触发该函数,在其间留一个空格,如下所示:

$('#selector').on('keyup keypress blur change paste cut', foo);

Answer 8

Tatu的答案就是我如何直观地做到这一点,但我在Internet Explorer中遇到了一些嵌套/绑定事件的方法,即使它是通过该.on()方法完成的.

我无法确切地确定哪个版本的jQuery存在问题.但我有时会在以下版本中看到问题:

• 2.0.2
• 1.10.1
• 1.6.4
• 移动1.3.0b1
• 移动1.4.2
• 移动1.2.0

我的解决方法是首先定义函数,

function myFunction() {
    ...
}

然后单独处理事件

// Call individually due to IE not handling binds properly
$(window).on("scroll", myFunction);
$(window).on("resize", myFunction);

这不是最漂亮的解决方案,但它适用于我,我想我会把它放在那里帮助那些可能偶然发现这个问题的人

Answer 9

$("element").on("event1 event2 event..n", function() {
   //execution
});

本教程是关于处理多个事件。

Answer 10

有没有一种方法有keyup，keypress，blur，和change事件调用同一个函数在同一行？

可以使用.on()，它接受以下结构：.on( events [, selector ] [, data ], handler )，因此您可以将多个事件传递给此方法。在您的情况下，它应该如下所示：

$('#target').on('keyup keypress blur change', function(e) {
    // "e" is an event, you can detect the type of event using "e.type"
});

这是现场示例：

$('#target').on('keyup keypress blur change', function(e) {
    // "e" is an event, you can detect the type of event using "e.type"
});

$('#target').on('keyup keypress blur change', function(e) {
  console.log(`"${e.type.toUpperCase()}" event happened`)
});