jQuery multiple events to trigger the same function

Question

Is there a way to have keyup  keypress  blur  and change events call the same function in one line or do I have to do them separately   The problem I have is that I need to validate some data with a db lookup and would like to make sure validation is not missed in any case  whether it is typed or pasted into the box

User · Answer

As of jQuery 1 7  the  on   method is the preferred method for attaching event handlers to a document  For earlier versions  the  bind   method is used for attaching an event handler directly to elements      document  on  mouseover mouseout    brand   function            star   toggleClass  hovered

User · Answer

It s simple to implement this with the built-in DOM methods without a big library like jQuery  if you want  it just takes a bit more code - iterate over an array of event names  and add a listener for each   function validate                 const element   document querySelector   element      keyup    keypress    blur    change   forEach  eventName    gt      element addEventListener eventName  validate

User · Answer

I was looking for a way to get the event type when jQuery listens for several events at once  and Google put me here   So  for those interested  event type is my answer        element   on  keyup keypress blur change   function event        alert event type      keyup OR keypress OR blur OR change       More info in the jQuery doc

User · Answer

element   on  event1 event2 event  n   function          execution       This tutorial is about handling multiple events

User · Answer

This is how i do it      input name  title     on        change keyup   function e            var slug     this  val   split      join  -   toLowerCase               input name  slug     val slug

User · Answer

You can use bind method to attach function to several events  Just pass the event names and the handler function as in this code       foo   bind  mouseenter mouseleave   function         this  toggleClass  entered          Another option is to use chaining support of jquery api

User · Answer

The answer by Tatu is how I would intuitively do it  but I have experienced some problems in Internet Explorer with this way of nesting binding the events  even though it is done through the  on   method   I havn t been able to pinpoint exactly which versions of jQuery this is the problem with  But I sometimes see the problem in the following versions    2 0 2 1 10 1 1 6 4 Mobile 1 3 0b1 Mobile 1 4 2 Mobile 1 2 0   My workaround have been to first define the function   function myFunction                 and then handle the events individually     Call individually due to IE not handling binds properly   window  on  scroll   myFunction     window  on  resize   myFunction     This is not the prettiest solution  but it works for me  and I thought I would put it out there to help others that might stumble upon this issue

User · Answer

You could define the function that you would like to reuse as below   var foo   function           And later you can set however many event listeners you want on your object to trigger that function using on  event   leaving a space in between as shown below       selector   on  keyup keypress blur change paste cut   foo

User · Answer

You can use  on   to bind a function to multiple events       element   on  keyup keypress blur change   function e           e type is the type of event fired       Or just pass the function as the parameter to normal event functions   var myFunction   function                   element        keyup myFunction       keypress myFunction       blur myFunction       change myFunction

User · Answer

Is there a way to have keyup  keypress  blur  and change events call the same function in one line    It s possible using  on    which accepts the following structure   on  events    selector      data    handler    so you can pass multiple events to this method  In your case it should look like this       target   on  keyup keypress blur change   function e            e  is an event  you can detect the type of event using  e type        And here is the live example    x000D   x000D      target   on  keyup keypress blur change   function e    x000D    console log     e type toUpperCase     event happened   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input id  target  gt  x000D   x000D   x000D

User · Answer

If you attach the same event handler to several events  you often run into the issue of more than one of them firing at once  e g  user presses tab after editing  keydown  change  and blur might all fire    It sounds like what you actually want is something like this       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

[jquery] jQuery multiple events to trigger the same function

Examples related to jquery

Examples related to events

Examples related to jquery-events