How to trigger event in JavaScript

Question

I have attached an event to a text box using addEventListener  It works fine  My problem arose when I wanted to trigger the event programmatically from another function    How can I do it

User · Answer

What you want is something like this   document getElementByClassName  example   click      Using jQuery  it would be something like this       example   trigger  click

User · Answer

Modified  Dorian s answer to work with IE   document addEventListener  my event   function e      console log e detail        var detail    Event fired    try           For modern browsers except IE      var event   new CustomEvent  my event    detail detail       catch err          If IE 11  or 10 or 9      do it this way          Create the event      var event   document createEvent  Event           Define that the event name is  build       event initEvent  my event   true  true       event detail   detail         Dispatch Trigger Fire the event document dispatchEvent event     FIDDLE  https   jsfiddle net z6zom9d0 1    SEE ALSO  https   caniuse com  feat customevent

User · Answer

I searched for firing click  mousedown and mouseup event on mouseover using JavaScript  I found an answer provided by Juan Mendes  For the answer click here   Click here is the live demo and below is the code   function fireEvent node  eventName           Make sure we use the ownerDocument from the provided node to avoid cross-window problems     var doc      if  node ownerDocument            doc   node ownerDocument        else if  node nodeType    9               the node may be the document itself  nodeType 9   DOCUMENT NODE         doc   node        else           throw new Error  Invalid node passed to fireEvent      node id              if  node dispatchEvent               Gecko-style approach  now the standard  takes more work         var eventClass                   Different events have different event classes             If this switch statement can t map an eventName to an eventClass             the event firing is going to fail          switch  eventName            case  click      Dispatching of  click  appears to not work correctly in Safari  Use  mousedown  or  mouseup  instead          case  mousedown           case  mouseup               eventClass    MouseEvents               break           case  focus           case  change           case  blur           case  select               eventClass    HTMLEvents               break           default              throw  fireEvent  Couldn t find an event class for event      eventName                     break                    var event   doc createEvent eventClass            var bubbles   eventName     change    false   true          event initEvent eventName  bubbles  true      All events created as bubbling and cancelable           event synthetic   true     allow detection of synthetic events            The second parameter says go ahead with the default action         node dispatchEvent event  true         else if  node fireEvent               IE-old school style         var event   doc createEventObject            event synthetic   true     allow detection of synthetic events         node fireEvent  on    eventName  event

User · Answer

The most efficient way is to call the very same function that has been registered with addEventListener directly   You can also trigger a fake event with CustomEvent and co   Finally some elements such as  lt input type  file  gt  support a  click   method

User · Answer

var btn   document getElementById  btn-test    var event   new Event null    event initEvent  beforeinstallprompt   true  true   btn addEventListener  beforeinstallprompt   null  false   btn dispatchEvent event     this will imediattely trigger an event  beforeinstallprompt

User · Answer

If you are supporting IE9  the you can use the following  The same concept is incorporated in You Might Not Need jQuery    x000D   x000D  function addEventListener el  eventName  handler    x000D    if  el addEventListener    x000D      el addEventListener eventName  handler   x000D      else   x000D      el attachEvent  on    eventName  function     x000D        handler call el   x000D          x000D      x000D    x000D   x000D  function triggerEvent el  eventName  options    x000D    var event  x000D    if  window CustomEvent    x000D      event   new CustomEvent eventName  options   x000D      else   x000D      event   document createEvent  CustomEvent    x000D      event initCustomEvent eventName  true  true  options   x000D      x000D    el dispatchEvent event   x000D    x000D   x000D     Add an event listener  x000D  addEventListener document   customChangeEvent   function e    x000D    document body innerHTML   e detail  x000D      x000D   x000D     Trigger the event  x000D  triggerEvent document   customChangeEvent     x000D    detail   Display on trigger     x000D      x000D   x000D   x000D      If you are already using jQuery  here is the jQuery version of the code above    x000D   x000D    function     x000D       Add an event listener  x000D      document  on  customChangeEvent   function e  opts    x000D         body   html opts detail   x000D        x000D   x000D       Trigger the event  x000D      document  trigger  customChangeEvent     x000D      detail   Display on trigger     x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

You can use below code to fire event using Element method   if   Element prototype triggerEvent        Element prototype triggerEvent   function  eventName            var event           if  document createEvent                event   document createEvent  HTMLEvents                event initEvent eventName  true  true             else               event   document createEventObject                event eventType   eventName                     event eventName   eventName           if  document createEvent                this dispatchEvent event             else               this fireEvent  on    event eventType  event                         x000D   x000D  if   Element prototype triggerEvent    x000D      Element prototype triggerEvent   function  eventName    x000D          var event  x000D   x000D          if  document createEvent    x000D              event   document createEvent  HTMLEvents    x000D              event initEvent eventName  true  true   x000D            else   x000D              event   document createEventObject    x000D              event eventType   eventName  x000D            x000D   x000D          event eventName   eventName  x000D   x000D          if  document createEvent    x000D              this dispatchEvent event   x000D            else   x000D              this fireEvent  on    event eventType  event   x000D            x000D         x000D    x000D   x000D  var input   document getElementById  my input    x000D  var button   document getElementById  my button    x000D   x000D  input addEventListener  change   function  e    x000D      alert  change event fired    x000D      x000D  button addEventListener  click   function  e    x000D      input value    Bye World   x000D      input triggerEvent  change    x000D      x000D   lt input id  my input  type  input  value  Hellow World  gt  x000D   lt button id  my button  gt Change Input lt  button gt  x000D   x000D   x000D

User · Answer

If you don t want to use jQuery and aren t especially concerned about backwards compatibility  just use   let element   document getElementById id   element dispatchEvent new Event  change        or whatever the event type might be   See the documentation here and here   EDIT  Depending on your setup you might want to add bubbles  true   let element   document getElementById id   element dispatchEvent new Event  change      bubbles   true

User · Answer

Use jquery event call  Write the below line where you want to trigger onChange of any element       element id   change      element id is the ID of the element whose onChange you want to trigger   Avoid the use of   element fireEvent  onchange      Because it has very less support  Refer this document for its support

User · Answer

The accepted answer didn   t work for me  none of the createEvent ones did   What worked for me in the end was   targetElement dispatchEvent      new MouseEvent  click             bubbles  true          cancelable  true          view  window         Here   s a snippet   x000D   x000D  const clickBtn   document querySelector   clickme    x000D  const viaBtn   document querySelector   viame    x000D   x000D  viaBtn addEventListener  click   function event    x000D      clickBtn dispatchEvent  x000D          new MouseEvent  click     x000D              bubbles  true  x000D              cancelable  true  x000D              view  window  x000D           x000D      x000D   x000D  clickBtn addEventListener  click   function event    x000D      console warn  I was accessed via the other button  A   event type  occurred     x000D      x000D   lt button class  clickme  gt Click me lt  button gt  x000D   x000D   lt button class  viame  gt Via me lt  button gt  x000D   x000D   x000D    From reading  https   developer mozilla org en-US docs Web API MouseEvent

User · Answer

You could use this function i compiled together   if   Element prototype trigger          Element prototype trigger   function event                var ev           try                       if  this dispatchEvent  amp  amp  CustomEvent                                ev   new CustomEvent event   detail   event     fired                      this dispatchEvent ev                             else                               throw  CustomEvent Not supported                                   catch e                        if  document createEvent                                ev   document createEvent  HTMLEvents                    ev initEvent event  true  true                    this dispatchEvent event                             else                               ev   document createEventObject                    ev eventType   event                  this fireEvent  on  event eventType  event                                       Trigger an event below   var dest   document querySelector   mapbox-directions-destination-input    dest trigger  focus      Watch Event   dest addEventListener  focus   function e      console log e         Hope this helps

User · Answer

Just to suggest an alternative that does not involve the need to manually invoke a listener event   Whatever your event listener does  move it into a function and call that function from the event listener   Then  you can also call that function anywhere else that you need to accomplish the same thing that the event does when it fires   I find this less  code intensive  and easier to read

User · Answer

A working example      Add an event listener document addEventListener  name-of-event   function e      console log e detail      Prints  Example of an event          Create the event var event   new CustomEvent  name-of-event      detail    Example of an event          Dispatch Trigger Fire the event document dispatchEvent event     For older browsers polyfill and more complex examples  see MDN docs   See support tables for EventTarget dispatchEvent and CustomEvent

User · Answer

You can use fireEvent on IE 8 or lower  and W3C s dispatchEvent on most other browsers  To create the event you want to fire  you can use either createEvent or createEventObject depending on the browser   Here is a self-explanatory piece of code  from prototype  that fires an event dataavailable on an element   var event     The custom event that will be created if document createEvent       event   document createEvent  HTMLEvents        event initEvent  dataavailable   true  true       event eventName    dataavailable       element dispatchEvent event     else       event   document createEventObject        event eventName    dataavailable       event eventType    dataavailable       element fireEvent  on    event eventType  event

User · Answer

if you use jQuery  you can simple do      yourElement   trigger  customEventName    arg0  arg1       argN      and handle it with      yourElement   on  customEventName      function  objectEvent   arg0  arg1       argN           alert   customEventName          where   arg0  arg1       argN   means that these args are optional

User · Answer

function fireMouseEvent obj  evtName        if  obj dispatchEvent              var event   new Event evtName           var event   document createEvent  MouseEvents            event initMouseEvent evtName  true  true  window                  0  0  0  0  0  false  false  false  false  0  null           obj dispatchEvent event         else if  obj fireEvent            event   document createEventObject            event button   1          obj fireEvent  on    evtName  event           obj fireEvent evtName         else           obj evtName              var obj   document getElementById            fireMouseEvent obj   click

User · Answer

HTML   lt a href  demoLink  id  myLink  gt  myLink  lt  a gt   lt button onclick  fireLink event   gt  Call My Link  lt  button gt    JS     click event listener of the link element --------------   document getElementById  myLink   addEventListener  click   callLink   function callLink e           code to fire       function invoked by the button element ---------------- function fireLink event                           document getElementById  myLink   click            script calls the  click  event of the link element

User · Answer

I just used the following  seems to be much simpler    element blur    element focus      In this case the event is triggered only if value was really changed just as you would trigger it by normal focus locus lost performed by user

[javascript] How to trigger event in JavaScript?

Examples related to javascript

Examples related to events

Examples related to triggers

Examples related to addeventlistener

Examples related to dom-events