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

2020/10/26 16:12 · jquery ·  · 0评论

有没有一种方法有keyupkeypressblur,和change事件调用同一个函数在一行或做我必须做的分别呢?

我的问题是我需要使用db查找来验证一些数据,并且想要确保在任何情况下都不会丢失验证,无论是键入验证还是粘贴到框中。

您可以.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)

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

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

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

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

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

jQuery文档中的更多信息

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

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

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

如果将同一个事件处理程序附加到多个事件,则经常会遇到多个问题,即一次触发(例如,用户在编辑后按下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.
});

这就是我的方法。

$("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);

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

我无法确切指出这是哪个版本的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
});

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

有没有一种方法有keyupkeypressblur,和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">

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

function validate() {
  // ...
}

const element = document.querySelector('#element');
['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {
  element.addEventListener(eventName, validate);
});
本文地址:http://jquery.askforanswer.com/jqueryduogeshijianchufaxiangtongdegongneng.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!