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 · 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::
```
 <button type="button" onclick="check_me(event);">Click Me!</button>
```

A useful link to understand this.

Full example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript">
      function check_me(ev) {
        ev.preventDefault();
        alert("Hello World!")
      }
    </script>
  </head>
  <body>
    <button type="button" onclick="check_me(event);">Click Me!</button>
  </body>
</html>

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`:

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <button id='my_button' type="button">Click Me!</button>

    <!-- put the javascript at the end to guarantee that the DOM is ready to use-->
    <script type="text/javascript">
      function check_me(ev) {
        ev.preventDefault();
        alert("Hello World!")
      }
      
      <!-- add the event to the button identified #my_button -->
      document.getElementById("my_button").addEventListener("click", check_me);
    </script>
  </body>
</html>

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:

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <button id='my_button' type="button">Click Me!</button>

    <!-- put the javascript at the end to guarantee that the DOM is ready to use-->
    <script type="text/javascript" src="example.js"></script>
  </body>
</html>

example.js:

function check_me(ev) {
    ev.preventDefault();
    alert("Hello World!")
}
document.getElementById("my_button").addEventListener("click", check_me);

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

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

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

Full example:

Alternatives (best practices):

A. Using `addEventListener`:

B. Isolating Javascript:

Examples related to javascript

Examples related to dom-events

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

Full example:

Alternatives (best practices):

A. Using addEventListener:

B. Isolating Javascript:

Examples related to javascript

Examples related to dom-events

A. Using `addEventListener`: