Accessing an Object's Property from an Event Listener Call in JavaScript

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

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.

Accessing object properties in listener method

When the function is called as an event listener, the context (this) is changed to something other that the object itself.

---

To resolve this, manually bind the context to the object instance in the constructor using bind(). This way, this will always point to the object instance, independent of the calling context:

var Obj = function() {  this.property = 'foo';  this.listener = this.listener.bind(this);}
Obj.prototype.listener = function() {  console.log(this.property);}
var a = new Obj();a.listener.call({});

Add an event listener on an objects property access/read

ES2015 has Proxy which has all sorts of weird and wonderful uses.

Given what you're asking:

I want to monitor all accesses to window.screen.

I don't want to change the existing behavior -
console.log(window.screen.availWidth) should still work. However, I'd
like to call another function upon that read.

ES2015 Proxy sounds like the perfect tool.

---

Working Example:

let handler = {
  get: (obj) => {        console.log('I am the Proxy');    return obj.availWidth;  }}
window.screen = new Proxy(window.screen, handler);
console.log(window.screen.availWidth);

How to access a JavaScript object property with addEventListener?

You can use bind, like:

function printFruits() {
    var counter = 0,
        element = document.getElementById("div1"),
        item;

    function onClick() {
        window.alert(this.type);
    }

    for (counter = 0; counter < 3; counter++) {
        item = fruitArray[counter];

        item.image.addEventListener("click", onClick.bind(item));
        element.appendChild(item.image);

    }
}

The bind() method creates a new function that, when called, has its
this keyword set to the provided value, with a given sequence of
arguments preceding any provided when the new function is called.

Using an object method as an event listener

I'm assuming that when you are binding the submit handler, you are doing something like this:

form.submit(user.onLoginSubmit);

While what you have does work, the best way to do with would be to bind the submit handler so that it actually calls onLoginSubmit with the proper 'this', so that you don't need any extra logic inside the submit handler.

If you do something like this when you bind the function, then it should work.

form.submit(function(e) {
  user.onLoginSubmit(e);
});

By using an anonymous function, you can still properly call the method of the user object.

If I'm misunderstanding your issue, please post a bit more code about how you are calling onLoginSubmit().

---

Related Topics