How To Pass Parameter To Event Listener Function In Javascript

When you develop a javascript application, when there are event occurs such as a button click event, you may want to pass some parameters to the event listener function. This article will tell you how to do it with examples.

1. Pass Parameter To The Button Click Event Listener Function Using The Button’s Onclick Attribute.

  1. The easiest way to pass the parameter to the button click event listener function is using the button’s onclick event attribute like the below example.
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="ISO-8859-1">
    <title>How To Pass Parameter To Event Listener Function In Javascript</title>
    <script type="text/javascript">
    
    function clickMe(name){
    
        alert(name + ' clicked me.');
    }
    
    </script>
    </head>
    <body>
    <h1>How To Pass Parameter To Event Listener Function In Javascript.</h1>
    <input type="button" value="Click Me" onclick="clickMe('Jerry')"/>
    </body>
    </html>
  2. In the above example, we pass the parameter’s value ‘jerry’ to the button click event listener function clickMe() directly using the button’s onclick attribute.
    <input type="button" value="Click Me" onclick="clickMe('jerry')"/>

2. Pass Parameter To The Button Click Event Listener Function Using Wrapper Function.

  1. If you add the button click event listener in javascript dynamically not in Html source code, you can use this method.
  2. This method will create a wrapper function and call the button click event listener function in the wrapper function.
  3. Then you can pass the parameter value to the button click event listener function in the wrapper function.
  4. Below is the example source code, the wrapper function is btnClick().
  5. When the Click You button is clicked, it will invoke the function btnClick(), and the function btnClick() will invoke the ClickMe(‘Richard’) function, passing the parameter ‘Richard’.
  6. Below is the example source code, the example Html file name is how-to-pass-parameter-to-event-listener-function-in-javascript.html.
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="ISO-8859-1">
    <title>How To Pass Parameter To Event Listener Function In Javascript</title>
    <script type="text/javascript">
    
    function clickMe(name){
    
        alert(name + ' clicked me.');
    }
    
    /* 
       Define a wrapper function and 
       
       invoke the button's click event listener function 
       
       in it and pass the parameter value.
    */
    function btnClick(){
    
        clickMe('richard');
    
    }
    
    /*
      This function will be invoked when the web page is loaded,
    
      so that we can make sure the button is rendered.
    */
    function init()
    {
        // Use the button id to get the button object.
        var btnClickYou = document.getElementById('btnClickYou');
    
        /*
       		Add click event listener to the button, 
       
       		and assign the wrapper funciton to the button click event listener.
     	*/
        btnClickYou.addEventListener("click", btnClick);
    
        //btnClickYou.addEventListener("click", () => { clickMe('Richard') });
    }
    
    
    </script>
    </head>
    <body onload="init()">
    <h1>How To Pass Parameter To Event Listener Function In Javascript.</h1>
    <input type="button" value="Click Me" onclick="clickMe('Jerry')"/>
    
    <input type="button" value="Click You" id="btnClickYou"/>
    </body>
    </html>
  7. The wrapper function can be an anonymous javascript function, then you can change the code btnClickYou.addEventListener(“click”, btnClick); to btnClickYou.addEventListener(“click”, () => { clickMe(‘Richard’) }); to make the javascript source code simple.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Clicky