How To Pass Parameter To Event Listener Function In Javascript Windows Tricks

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.

Table of Contents

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

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>

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.

If you add the button click event listener in javascript dynamically not in Html source code, you can use this method.
This method will create a wrapper function and call the button click event listener function in the wrapper function.

Then you can pass the parameter value to the button click event listener function in the wrapper function.
Below is the example source code, the wrapper function is btnClick().
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’.

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>

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.

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

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

Leave a Comment Cancel Reply