jQuery multiple events to trigger the same function
有没有办法有
我的问题是我需要验证的一些数据,一个DB想查找和验证是确保了在任何情况,无论是形或到糊盒。
可以使用
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开始,
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中遇到了一些问题,即这种嵌套/绑定事件的方式,即使它是通过
我还不能准确地指出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 }); |
本教程是关于处理多个事件的。
有没有办法让
可以使用
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"> |