How to Pass Parameter to Function Using in Addeventlistener

How to pass arguments to addEventListener listener function?

There is absolutely nothing wrong with the code you've written. Both some_function and someVar should be accessible, in case they were available in the context where anonymous

function() { some_function(someVar); }

was created.

Check if the alert gives you the value you've been looking for, be sure it will be accessible in the scope of anonymous function (unless you have more code that operates on the same someVar variable next to the call to addEventListener)

var someVar; 
someVar = some_other_function();
alert(someVar);
someObj.addEventListener("click", function(){
    some_function(someVar);
}, false);

How to pass parameter to function using in addEventListener?

No need to pass anything in. The function used for addEventListener will automatically have this bound to the current element. Simply use this in your function:

productLineSelect.addEventListener('change', getSelection, false);

function getSelection() {
    var value = this.options[this.selectedIndex].value;
    alert(value);
}

Here's the fiddle: http://jsfiddle.net/dJ4Wm/

If you want to pass arbitrary data to the function, wrap it in your own anonymous function call:

productLineSelect.addEventListener('change', function() {
    foo('bar');
}, false);

function foo(message) {
    alert(message);
}

Here's the fiddle: http://jsfiddle.net/t4Gun/

If you want to set the value of this manually, you can use the call method to call the function:

var self = this;
productLineSelect.addEventListener('change', function() {
    getSelection.call(self);
    // This'll set the `this` value inside of `getSelection` to `self`
}, false);

function getSelection() {
    var value = this.options[this.selectedIndex].value;
    alert(value);
}

How to pass arguments to addEventListener listener function with typescript?

Just wrap the actual event handler in an anonymous function and that function can then call your function with its arguments. But don't forget that event handlers are automatically passed a reference to the event that triggered them, so capture that in the outer handler and pass it along with your other arguments:

document.addEventListener("keyup", function(event){ searchKeyPressHandler(event, x,y,z); });

Or, if you need to utilize the function that you are setting up as the "wrapper" more than once (in the case of having to remove the listener later), you'd just declare the function with a name and pass that name into .addEventListner() as follows:

function handler(event){ 
  searchKeyPressHandler(event, x,y,z); 
}

document.addEventListener("keyup", handler);

// And later...
document.removeEventListener("keyup", handler);

JavaScript addEventListener function with parameters

you can use () => { call your function here } or function(){ call your function here}

document.getElementById("button1")
.addEventListener("click", () => { test1("four");});

function test1(text) {
  console.log(text);
}

<button id="button1">Click Me</button>

How to pass some parameters to function called in addEventListener?

You don't. Use anonymous functions:

document.getElementById('date_right').addEventListener('click', function () {
    switch_date(1);
}, false);
document.getElementById('date_left').addEventListener('click', function () {
    switch_date(-1);
}, false);

Or use named functions which do not take arguments:

function onRightDateClick() {
    switch_date(1);
}

function onLeftDateClick() {
    switch_date(-1);
}

document.getElementById('date_right').addEventListener('click', onRightDateClick, false);
document.getElementById('date_left').addEventListener('click', onLeftDateClick, false);

javascript addEventListener function parameters

Browser triggered events are just that, they are triggered by the browser. As such you cannot pass your own arguments to them. When a typical browser event is fired and a handler for that event has been registered, the registered handler is automatically called by the user-agent and that handler is automatically passed a single argument, that references the event that triggered the handler. From that event, you can access whatever properties it has by accessing that argument. Argument names are only for the code within the function to access the data passed to the function. The name it is received as does not alter the data that is passed into the function.

In your case, you are setting up a click event handler for the window object, so a reference to the click event is what will be passed into your callback function. There is nothing you can do to alter that and you may call that argument anything you like. The properties for the event object will depend on the kind of event object that is generated (i.e. for mouse related events, you'll have properties like clientX and clientY, but for keyboard related events, you'll have properties like keyCode and shiftKey). Simply logging the event itself or debugging the event handling function will allow you to inspect all the properties available to you, but again, those properties will vary depending on the type of event you are handling.

window.addEventListener("click",function(aNameThatIhaveChosen){  console.log("You have clicked at: " + aNameThatIhaveChosen.clientX + ", " + aNameThatIhaveChosen.clientY );});

<h1>Click anywhere</h1>

How to pass an argument to a function in an event listener

This should solve it cornelking

const displayExtraUserInfo = (param) => {
  document.querySelector('#btn-birthdate').addEventListener('click', () => {
    displayBirthdate(param);
  });
};

How to pass arguments to addEventListener for google maps Polygon listener function in addition to the event?

The Polygon's click event listener takes only one parameter. That means the library passes no more than one parameter when it calls the function.

If the information you need is not attached to the event object, you have to retrieve it by other means.

If you need to pass the parameters yourself, you can write a higher order function:

function showArrays(area) {
  return function (event) {
    let contentString =
      '<div class="form-group pr-2 pl-2">' +
      '<div class="text-dark">name:</div>' +
      area.name +
      "<br>" +
      '<div class="text-dark">shipping_cost :</div>' +
      area.shipping_cost +
      "$" +
      "<br></div>";
    // Replace the info window's content and position.
    infoWindow.setContent(contentString);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  };
}

bermudaTriangle.addListener("click", showArrays(area));

Pass this to addEventListener() as parameter

Inside the forEach callback, this does not refer to a DOM element. It doesn't refer to any useful value.

Secondly, you are immediately calling cbChange and pass its return value to addEventListener, which is undefined. But addEventListener expects to be passed a function, so you either have to pass cbChange or a function that calls cbChange.

Lastly, while you could define the event handler to accept the element as first argument, it's much simpler if it accepts the event object, because that is the default API.

Having said all that, the simplest solution would be:

var checkboxes = document.getElementsByClassName('cb');
Array.from(checkboxes).forEach(function(element){
//                                      ^^^^^^^
  element.addEventListener("change", cbChange, false);
//^^^^^^^  
});

function cbChange(){
  console.log(this.value);
//            ^^^^
}

Since inside an event handler, this refers to the element the handler is bound to, using this inside cbChange just works.

And here are some alternatives:

// Use the event object
var checkboxes = document.getElementsByClassName('cb');
Array.from(checkboxes).forEach(function(element){
  element.addEventListener("change", cbChange, false);
});

function cbChange(event){
  console.log(event.target.value);
}


// Using a wrapper that calls `cbChange`
var checkboxes = document.getElementsByClassName('cb');
Array.from(checkboxes).forEach(function(element){
  element.addEventListener("change", function() { cbChange(this); }, false);
});

function cbChange(ele){
  console.log(ele.value);
}