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

有没有办法让keyup，keypress，blur和change事件在一行中调用相同的函数，或者我必须分别进行处理？使用db查找的数据，无论是键入还是粘贴到框中，都希望确保在任何情况下都不会丢失验证。

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

对于以空格分隔的事件，您还如何包括名称间隔？ .on（'keyup.foo keypress.foo blur.foo change.foo'，…）或.on（'keyup keypress blur change .foo'，…）？

– Sukima
2015年12月14日14:48在

这样做的问题是myFunction可能会多次调用，您可能想避免这种情况。

– Esger
16年1月21日在9:51

如何在此函数中传递参数？

– HalfWebDev
16年5月26日在7:45

@Esger无论如何要这样做？在移动设备中，我始终需要打开（“点击”，e => {...}）。监听器可能被触发两次，我只想触发一次，如何在监听器函数中编码？

–tomision
16年10月10日在14:34

@Tomlsion也许在调用的函数中的元素上添加一个className'busy'，然后$（'＃element：not（.busy）'）。on（'keyup keypress blur change'，function（e）{…}） ;最后删除className'busy'。

– Esger
16-12-4在21:57

#2 楼

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

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

这是针对委派事件完成的，它将起作用，但这不是最简单的方法，也不是最有效的方法。

– Ben Taliadoros
2014年4月8日在15:19

事件委托很重要，可能（也可能不需要），取决于脚本加载/运行的时间以及元素在加载/运行时是否存在于DOM中。

–random_user_name
17年1月11日在16:57

#3 楼

当jQuery一次侦听多个事件时，我一直在寻找一种获取事件类型的方法，然后Google将我放在这里。

因此，对于那些感兴趣的人，event.type是我的答案：

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

jQuery文档中的更多信息。

#4 楼

您可以使用bind方法将函数附加到多个事件。只需按照以下代码传递事件名称和处理程序函数即可：

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

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

从jQuery 1.7开始，.on（）方法是将事件处理程序附加到文档的首选方法。

– Dzhuneyt
13年8月25日在18:25

#5 楼

如果将同一事件处理程序附加到多个事件，则经常会遇到多个问题，即一次触发（例如，用户在编辑后按下Tab键；击键，更改和模糊都可能触发）。

听起来您实际上想要的是这样的东西：

$('#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.
});

#6 楼

这就是我的方法。

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

#7 楼

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

var foo = function() {...}

随后，您可以使用对象设置任意多个事件监听器，以使用on（'event'）之间留有一个空格，如下所示：

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

通常，您应该解释您的答案。简单地粘贴代码并不能帮助OP了解他们的问题或您的解决方案。

– leigero
15年4月8日在18:06

如果我在jquery事件订阅者函数（事件）中需要第一个参数怎么办？如何使用它？

– X博士
18-09-14在6:32

没关系，您可以仅使用event参数声明函数，然后从方法中访问它。这些事件将自己传递对象。我希望这有帮助。 var foo = function（event）{console.log（event）; } $（'＃selector'）。on（'keyup keypress模糊更改粘贴剪切'，foo）;

–银河编码器
18-09-17在14:00

#8 楼

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

我无法确切指出这是哪个版本的jQuery。但是我有时会在以下版本中看到该问题：

2.0.2
1.10.1
1.6.4
Mobile 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);

这不是最漂亮的解决方案，但它对我有用，我想我会把它摆出来，以帮助可能绊倒的其他人在这个问题上

#9 楼

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

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

#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) {
  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">

#11 楼

使用内置的DOM方法实现此操作很简单，而无需像jQuery这样的大库，如果需要的话，它只需要花费更多的代码-迭代事件名称数组，并为每个事件名称添加一个侦听器：

function validate() {
  // ...
}

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

编程黑洞网