How to pass an event object to a function in Javascript

Question

lt button type  button  value  click me  onclick  check me       gt   function check me         event preventDefault      var hello   document myForm username value    var err          if hello          hello    null        err    User name required          if err                alert err            username   focus          return false        else        return true        In Firefox  when I try to submit an empty value it throws up the error and sets the focus back to element  But same thing doesn t happen in IE as it throws up error and after clicking OK and posts the form  returns true    How I can avoid this  I was thinking to avoid this using event preventDefault    but I am not sure how to do this using this method  I tried passing checkme event     but it didn t work  I am using Prototype js    I know how to pass an event when I bind an  click function in Javascript   instead of calling onclick within html    using Jquery  but I have to debug this piece of code

User · Accepted Answer

Although this is the accepted answer  toto tico s answer below is better      Try making the onclick js use  return  to ensure the desired return value gets used      lt button type  button  value  click me  onclick  return check me       gt

User · Answer

I would change your binding to be    lt button type  button  value  click me  onclick  check me    gt    I would then change your check me   function declaration to be   function check me            event preventDefault      var hello   document myForm username value    var err          if hello          hello    null        err    User name required          if err                alert err            username   focus          event preventDefault          else        return true

User · Answer

Modify the definition of the function check me as    function check me ev      Now you can access the methods and parameters of the event  in your case   ev preventDefault      Then  you have to pass the parameter on the onclick in the inline call     lt button type  quot button quot  onclick  quot check me event   quot  gt Click Me  lt  button gt     A useful link to understand this   Full example   lt  DOCTYPE html gt   lt html lang  quot en quot  gt     lt head gt       lt script type  quot text javascript quot  gt        function check me ev            ev preventDefault            alert  quot Hello World  quot                lt  script gt     lt  head gt     lt body gt       lt button type  quot button quot  onclick  quot check me event   quot  gt Click Me  lt  button gt     lt  body gt   lt  html gt            Alternatives  best practices   Although the above is the direct answer to the question  passing an event object to an inline event   there are other ways of handling events that keep the logic separated from the presentation A  Using addEventListener   lt  DOCTYPE html gt   lt html lang  quot en quot  gt     lt head gt     lt  head gt     lt body gt       lt button id  my button  type  quot button quot  gt Click Me  lt  button gt        lt  -- put the javascript at the end to guarantee that the DOM is ready to use-- gt       lt script type  quot text javascript quot  gt        function check me ev            ev preventDefault            alert  quot Hello World  quot                         lt  -- add the event to the button identified  my button -- gt        document getElementById  quot my button quot   addEventListener  quot click quot   check me        lt  script gt     lt  body gt   lt  html gt   B  Isolating Javascript  Both of the above solutions are fine for a small project  or a hackish quick and dirty solution  but for bigger projects  it is better to keep the HTML separated from the Javascript  Just put this two files in the same folder   example html    lt  DOCTYPE html gt   lt html lang  quot en quot  gt     lt head gt     lt  head gt     lt body gt       lt button id  my button  type  quot button quot  gt Click Me  lt  button gt        lt  -- put the javascript at the end to guarantee that the DOM is ready to use-- gt       lt script type  quot text javascript quot  src  quot example js quot  gt  lt  script gt     lt  body gt   lt  html gt    example js   function check me ev        ev preventDefault        alert  quot Hello World  quot     document getElementById  quot my button quot   addEventListener  quot click quot   check me

[javascript] How to pass an event object to a function in Javascript?

Examples related to javascript

Examples related to dom-events