Accessing an object’s property from an event listener call in JavaScript

by

When the event handler gets called, “this” no longer references the “someObj” object. You need to capture “this” into a local variable that the mouseMoving function will capture.

var someObj = function someObj(){
    this.prop = 33;
    var self = this;
    this.mouseMoving = function() { console.log(self.prop);}

    document.getElementById("someDiv").addEventListener('mousemove', this.mouseMoving, true);
}

I’m assuming “someObj is a constructor, i.e. intended to be called with as new someObj(), otherwise “this” will be the global scope.

The “this” keyword can be confusing in JavaScript, because it doesn’t work the same way as in other languages. The key thing to remember is that it is bound to the calling object when the function is called, not when the function is created.

More Related Contents:

  1. How can I capture the right-click event in JavaScript? [duplicate]
  2. event.preventDefault() vs. return false (no jQuery)
  3. jQuery equivalent of JavaScript’s addEventListener method
  4. Are event handlers in JavaScript called in order?
  5. Handling “onclick” event with pure JavaScript
  6. JavaScript add events cross-browser function implementation: use attachEvent/addEventListener vs inline events
  7. visibilitychange event is not triggered when switching program/window with ALT+TAB or clicking in taskbar
  8. event.preventDefault() vs. return false
  9. What is DOM Event delegation?
  10. How to trigger event in JavaScript?
  11. window.onload vs document.onload
  12. JavaScript: remove event listener
  13. Firing event on DOM attribute change
  14. What exactly is the parameter e (event) and why pass it to JavaScript functions?
  15. How can I trigger an onchange event manually? [duplicate]
  16. DOM event precedence
  17. Javascript event handler with parameters
  18. How do you log all events fired by an element in jQuery?
  19. Pass mouse events through absolutely-positioned element
  20. How to pass event as argument to an inline event handler in JavaScript?
  21. Capture click on div surrounding an iframe
  22. How do you detect the clearing of a “search” HTML5 input?
  23. Implementing jQuery’s “live” binder with native Javascript
  24. Remove key press delay in Javascript
  25. How to unbind a specific event handler
  26. Is event a global variable that is accessible everywhere inside the callback chain?
  27. How to implement a lock in JavaScript
  28. Fire oninput event with jQuery
  29. How can I remove a JavaScript event listener?
  30. Replacement for deprecated `keypress` DOM event

Leave a Comment