如何用jQuery从多个事件触发相同的函数?

有没有办法让keyup、keypress、blur和change事件在一行中调用相同的函数，或者我必须分别执行它们?

我的问题是，我需要验证一些数据与数据库查找，并希望确保验证不错过在任何情况下，无论是键入或粘贴到框。

748923 次浏览
小开

您可以使用绑定的方法将函数附加到几个事件。只需要传递事件名称和处理函数，如下所示:

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

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

小开
最佳答案

你可以使用.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)
小开

如果你将同一个事件处理程序附加到几个事件上，你经常会遇到多个事件同时触发的问题(例如，用户在编辑后按tab键;按键、改变和模糊都可能触发)。

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

$('#ValidatedInput').keydown(function(evt) {// If enter is pressedif (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.});
小开

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

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

我正在寻找一种方法来获得事件类型时，jQuery监听几个事件，谷歌把我放在这里。

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

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

更多信息在jQuery文档。

小开

我就是这么做的。

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

Tatu的答案是我如何直观地做到这一点，但我在Internet Explorer中遇到了一些问题，这种嵌套/绑定事件的方式，即使它是通过# 0方法完成的。

我还不能准确地指出问题出在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);

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

小开

你可以这样定义你想重用的函数:

var foo = function() {...}

之后，你可以在你的对象上设置任意数量的事件监听器来触发该函数，使用on('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">

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

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

小开

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

function validate(event) {// ...}
const element = document.querySelector('#element');['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {element.addEventListener(eventName, validate);});

如果你想模拟添加多个元素:

const elements = document.querySelectorAll('.commonSelector');['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {elements.forEach(element => {element.addEventListener(eventName, validate);});});
小开

而不是:

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

你可以使用:

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

input为keyup keypress blur change事件触发，甚至为paste!


提交答案