【发布时间】：2011-02-01 19:24:22
【问题描述】：
有没有办法让keyup、keypress、blur 和change 事件在一行中调用相同的函数，还是我必须分别执行它们？
我遇到的问题是我需要使用数据库查找来验证一些数据，并且希望确保在任何情况下都不会错过验证，无论是输入还是粘贴到框中。
【问题讨论】：
标签： jquery events jquery-events
【发布时间】：2011-02-01 19:24:22
【问题描述】：
您可以使用.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)
【讨论】：
-
使用空格分隔的事件，您如何还包括名称间距？
.on('keyup.foo keypress.foo blur.foo change.foo', …)或.on('keyup keypress blur change .foo', …)? -
这个问题是 myFunction 可能会被多次调用，你可能想阻止它。
-
如何在这个函数中传递参数？
-
@Esger 无论如何要这样做？在移动端，我总是需要
on('click tap', e => {...})。监听器可能触发了两次，我只想触发一次，监听器函数怎么写代码？ -
@Tomlsion 可能在被调用函数的元素上加一个className 'busy'，然后
$('#element:not(.busy)').on('keyup keypress blur change', function(e){…});最后去掉className 'busy'。
从 jQuery 1.7 开始，.on() 方法是将事件处理程序附加到文档的首选方法。对于早期版本，.bind() 方法用于将事件处理程序直接附加到元素。
$(document).on('mouseover mouseout',".brand", function () {
$(".star").toggleClass("hovered");
})
【讨论】：
-
这是为委托事件完成的，它会起作用，但这不是最简单的方法，也不是最有效的。
-
事件委托很重要，可能（或可能不需要）取决于脚本何时加载/运行，以及在脚本加载/运行时元素是否存在于 DOM 中。
当 jQuery 一次监听多个事件时，我正在寻找一种获取事件类型的方法，而 Google 将我放在这里。
所以，对于那些感兴趣的人，event.type 是我的答案：
$('#element').on('keyup keypress blur change', function(event) {
alert(event.type); // keyup OR keypress OR blur OR change
});
更多信息请关注jQuery doc。
【讨论】：
您可以使用bind method 将函数附加到多个事件。只需像以下代码一样传递事件名称和处理函数：
$('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
});
另一种选择是使用 jquery api 的链式支持。
【讨论】：
-
从 jQuery 1.7 开始，.on() 方法是将事件处理程序附加到文档的首选方法。
如果您将同一个事件处理程序附加到多个事件，您经常会遇到多个事件同时触发的问题（例如，用户在编辑后按下 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.
});
【讨论】：
我就是这样做的。
$("input[name='title']").on({
"change keyup": function(e) {
var slug = $(this).val().split(" ").join("-").toLowerCase();
$("input[name='slug']").val(slug);
},
});
【讨论】：
你可以定义你想重用的函数如下：
var foo = function() {...}
稍后您可以在对象上设置任意数量的事件侦听器，以使用 on('event') 来触发该函数，在两者之间留一个空格，如下所示：
$('#selector').on('keyup keypress blur change paste cut', foo);
【讨论】：
-
通常你应该解释你的答案。简单地粘贴代码并不能帮助 OP 理解他们的问题或您的解决方案。
-
如果我需要 jquery 事件订阅函数（事件）中的第一个参数怎么办？怎么用？
-
没关系，你可以用事件参数声明函数，然后在方法中访问它。这些事件本身会传递对象。我希望这有帮助。 var foo = function(event) { console.log(event); } $('#selector').on('keyup keypress blur change paste cut', foo);
有没有办法让
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) {
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">【讨论】：
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);
这不是最漂亮的解决方案，但它对我有用，我想我会把它放在那里帮助其他可能偶然发现这个问题的人
【讨论】：
$("element").on("event1 event2 event..n", function() {
//execution
});
This tutorial 是关于处理多个事件。
【讨论】：
使用内置 DOM 方法实现这一点很简单，不需要像 jQuery 这样的大库，如果你愿意，它只需要更多代码 - 遍历事件名称数组，并为每个事件添加一个侦听器：
function validate() {
// ...
}
const element = document.querySelector('#element');
['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {
element.addEventListener(eventName, validate);
});
【讨论】：