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

jQuery multiple events to trigger the same function

有没有办法有keyupkeypressblur,事件,和change呼叫相同的功能在一个线或做我必须做他们的菜单?

我的问题是我需要验证的一些数据,一个DB想查找和验证是确保了在任何情况,无论是形或到糊盒。


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

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

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

1
2
3
4
5
6
7
8
9
var myFunction = function() {
   ...
}

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


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

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


当jquery同时监听几个事件时,我正在寻找一种获取事件类型的方法,Google把我放在这里。

因此,对于那些感兴趣的人,我的答案是:

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

jquery文档中的详细信息。


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

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

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


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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$('#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.
});

我就是这样做的。

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


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

1
var foo = function() {...}

稍后,您可以使用on("event")在对象上设置任意多个事件监听器来触发该函数,并在两者之间留一个空格,如下所示:

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


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

我还不能准确地指出jquery的哪个版本是问题所在。但我有时会在以下版本中看到问题:

  • 2.0.2
  • 1.1.1
  • 1.4.4
  • 手机1.3.0B1
  • 手机1.4.2
  • 移动1.2.0

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

1
2
3
function myFunction() {
    ...
}

然后单独处理事件

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

这不是最漂亮的解决方案,但它对我很有用,我想我会把它放在那里帮助其他可能会遇到这个问题的人。


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

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


有没有办法让keyupkeypressblurchange事件在一行中调用相同的函数?

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

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

下面是一个活生生的例子:

1
2
3
$('#target').on('keyup keypress blur change', function(e) {
  console.log(`"${e.type.toUpperCase()}" event happened`)
});
1
2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<input id="target">