Although the inline event handler for HTML elements is not recommended, it is still supported by Chrome and Firefox, I just want to write an example for record only. Consider the following code:

     <script>
        function go(){
            console.log("Hi");
        }
     </script>
     <form>
	<button onclick="go()">Say Hi</button>
     </form>

When a user clicks the button, by default, the form will be submitted. To prevent the form from submission, we can use the e.preventDefault() to do so. But, how to pass the event object to the event handler, The sample code is as below:

    <script>
        function go(e){
            e.preventDefault();
            console.log("Hi");
        }
     </script>
     <form>
	<button onclick="go(event)">Say Hi</button>
     </form>

To pass an event object to the event handler, you must pass the “event" variable to the event handler, which means the following code is not work.

<button onclick="go(abc)">Init</button>

You have to use the following code to make it work properly.

<button onclick="go(event)">Say Hi</button>

After the code is changed, when a user clicks the button, the form will be submitted and the word “Hi" will be shown in the console.

#javascript

#html