Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pass this to addEventListener() as parameter

I want to add change event to a group of checkboxes, how can I access this in my event function, so that when I do the event I can access value of the checkbox.

This is my current code:

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

function cbChange(ele){
  console.log(ele.value);
}
<input class="cb" type="checkbox" name="candidate" value="1"/>
<input class="cb" type="checkbox" name="candidate" value="2"/>
<input class="cb" type="checkbox" name="candidate" value="3"/>
<input class="cb" type="checkbox" name="candidate" value="4"/>
like image 580
Hassan Imam Avatar asked Jul 08 '17 16:07

Hassan Imam


People also ask

How do you pass parameters in event listener?

If you want to pass a parameter to the click event handler you need to make use of the arrow function or bind the function.

How do you pass a function in addEventListener?

Here is the code: var someVar = some_other_function(); someObj. addEventListener("click", function(){ some_function(someVar); }, false);

How do you add an event listener to a variable?

To set up an event listener you just need to have a variable that references an element and then call the addEventListener function on that element. This function takes a minimum of two parameters. The first parameter is just a string which is the name of the event to listen to.

What is the third parameter in addEventListener?

Safely detecting option support. In older versions of the DOM specification, the third parameter of addEventListener() was a Boolean value indicating whether or not to use capture.


2 Answers

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);
}
like image 75
Felix Kling Avatar answered Oct 21 '22 17:10

Felix Kling


Remove (this) from cbChange(this). This will immediately execute the function.

To get the value you need the target.target is the element on which event is executed.On consoling ele you will see all available options

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

function cbChange(ele) {
  console.log(ele.target.value);
}
<input class="cb" type="checkbox" name="candidate" value="1" />
<input class="cb" type="checkbox" name="candidate" value="2" />
<input class="cb" type="checkbox" name="candidate" value="3" />
<input class="cb" type="checkbox" name="candidate" value="4" />
like image 38
brk Avatar answered Oct 21 '22 16:10

brk