1078

有没有办法让keyup, keypress,blur和changeevents 在一行中调用相同的函数，还是我必须单独执行它们？

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

4

11 回答 11

1981

您可以使用.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)
于 2010-03-28T18:56:20.207 回答
64

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

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})
于 2012-11-14T08:14:41.010 回答
53

当 jQuery 一次监听多个事件时，我正在寻找一种获取事件类型的方法，而谷歌将我放在这里。

所以，对于那些感兴趣的人，event.type我的回答是：

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

jQuery 文档中的更多信息。

于 2013-05-14T22:00:49.290 回答
26

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

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

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

于 2010-03-28T18:55:40.687 回答
18

如果您将同一个事件处理程序附加到多个事件，您经常会遇到多个事件同时触发的问题（例如，用户在编辑后按下 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.
});
于 2010-03-28T19:33:37.520 回答
14

我就是这样做的。

$("input[name='title']").on({
    "change keyup": function(e) {
        var slug = $(this).val().split(" ").join("-").toLowerCase();
        $("input[name='slug']").val(slug);
    },
});
于 2014-11-09T12:46:30.383 回答
12

您可以定义要重用的函数，如下所示：

var foo = function() {...}

稍后，您可以在对象上设置任意数量的事件侦听器，以使用 on('event') 触发该函数，在两者之间留一个空格，如下所示：

$('#selector').on('keyup keypress blur change paste cut', foo);
于 2015-04-08T17:51:04.533 回答
9

有没有办法让keyup, keypress,blur和changeevents 在一行中调用相同的函数？

可以使用.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) {
  console.log(`"${e.type.toUpperCase()}" event happened`)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="target">

于 2017-09-26T19:16:49.357 回答
7

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);

这不是最漂亮的解决方案，但它对我有用，我想我会把它放在那里以帮助可能偶然发现这个问题的其他人

于 2015-04-07T08:57:03.843 回答
6 
$("element").on("event1 event2 event..n", function() {
   //execution
});

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

于 2018-04-22T08:47:46.277 回答
2

使用内置 DOM 方法实现这一点很简单，不需要像 jQuery 这样的大库，如果需要，只需要更多代码 - 遍历事件名称数组，并为每个事件名称添加一个侦听器：

function validate() {
  // ...
}

const element = document.querySelector('#element');
['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {
  element.addEventListener(eventName, validate);
});
于 2019-05-21T06:54:13.310 回答