How to pass parameter to function using in addEventListener?

by

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);
}

More Related Contents:

  1. How to make JavaScript execute after page load?
  2. Is it possible to append to innerHTML without destroying descendants’ event listeners?
  3. How can I capture the right-click event in JavaScript? [duplicate]
  4. How to make HTML element resizable using pure Javascript?
  5. HTML input file selection event not firing upon selecting the same file
  6. Adding an onclick event to a table row
  7. Javascript trick for ‘paste as plain text` in execCommand
  8. Want to add “addEventListener” on multiple elements with same class [duplicate]
  9. Pass mouse events through absolutely-positioned element
  10. Open popup and refresh parent page on close popup
  11. adding multiple event listeners to one element
  12. Ignore mouse interaction on overlay image
  13. Why don’t audio and video events bubble?
  14. Enter key press behaves like a Tab in Javascript
  15. Detect if HTML5 Video element is playing [duplicate]
  16. Perform action when clicking HTML5 datalist option
  17. HTML DOM: Which events do not bubble?
  18. How to Clear/Remove JavaScript Event Handler?
  19. Handling “onclick” event with pure JavaScript
  20. Looping through files for FileReader, output always contains last value from loop
  21. event.clipboardData.setData in copy event
  22. Popstate on page’s load in Chrome
  23. visibilitychange event is not triggered when switching program/window with ALT+TAB or clicking in taskbar
  24. Reload an HTML page just once using JavaScript
  25. Fire oninput event with jQuery
  26. Use JavaScript to intercept all document link clicks
  27. How to execute code in a javascript append
  28. Are dynamically inserted tags meant to work?
  29. Display Spreadsheet Data to HTML Table
  30. Display Spreadsheet Data to HTML Table

Leave a Comment