{"action":"opened","issue":{"url":"https://api.github.com/repos/aurelia/framework/issues/881","repository_url":"https://api.github.com/repos/aurelia/framework","labels_url":"https://api.github.com/repos/aurelia/framework/issues/881/labels{/name}","comments_url":"https://api.github.com/repos/aurelia/framework/issues/881/comments","events_url":"https://api.github.com/repos/aurelia/framework/issues/881/events","html_url":"https://github.com/aurelia/framework/issues/881","id":316170589,"number":881,"title":"Event Handlers for DOM Event Listeners Lose the Context of \"this\"","user":{"login":"SebGX","id":15003206,"avatar_url":"https://avatars3.githubusercontent.com/u/15003206?v=4","gravatar_id":"","url":"https://api.github.com/users/SebGX","html_url":"https://github.com/SebGX","followers_url":"https://api.github.com/users/SebGX/followers","following_url":"https://api.github.com/users/SebGX/following{/other_user}","gists_url":"https://api.github.com/users/SebGX/gists{/gist_id}","starred_url":"https://api.github.com/users/SebGX/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SebGX/subscriptions","organizations_url":"https://api.github.com/users/SebGX/orgs","repos_url":"https://api.github.com/users/SebGX/repos","events_url":"https://api.github.com/users/SebGX/events{/privacy}","received_events_url":"https://api.github.com/users/SebGX/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-04-20T08:17:07Z","updated_at":"2018-04-20T08:17:07Z","closed_at":null,"author_association":"NONE","body":"**I'm submitting a bug report**\r\n\r\n* **Library Version:**\r\n3.1.1\r\n\r\n**Please tell us about your environment:**\r\n* **Operating System:**\r\nWindows 10 Pro, version 1709, build 16299.371\r\n\r\n* **Node Version:**\r\n8.10.0\r\n\r\n* **NPM Version:**\r\n5.8.0\r\n\r\n* **Aurelia CLI OR JSPM OR Webpack AND Version**\r\nCLI 0.32.0\r\n\r\n* **Browser:**\r\nall\r\n\r\n* **Language:**\r\nall\r\n\r\n**Current behavior:**\r\nIf you add a DOM event listener, the \"this\" keyword loses its context in the event handler when the event is raised:\r\n```typescript\r\nexport class SomeClass {\r\n  someProperty: number = 0;\r\n\r\n  activateEvent(someElement: Element) {\r\n    someElement.addEventListener('click', this.clickEventHandler);\r\n  }\r\n\r\n  clickEventHandler(event: Event) {\r\n    // The \"this\" keyword in the context of this method does not reference an instance of the\r\n    // containing class when the event is raised.\r\n    this.someProperty += 2;\r\n  }\r\n}\r\n```\r\n\r\n**Expected/desired behavior:**\r\nGiven that the event handler is an instance method, the reference to its object instance should be preserved.\r\n\r\nIf the issue cannot be resolved because of an underlying component that is not managed by the team, please may you look at the Tweaky workaround below and consider adopting it as the convention in the docs? Would be great to have a \"supported\" approach.\r\n\r\n* **What is the motivation / use case for changing the behavior?**\r\nPreserving object instance references results in more stable code and less messy / hacky workarounds.\r\n\r\n**Workarounds**\r\n* **Messy - Define the event handler in the constructor**\r\n```typescript\r\nexport class SomeClass {\r\n  someProperty: number = 0;\r\n  clickEventHandler = null;\r\n\r\n  constructor() {\r\n    this.clickEventHandler = (event: Event) => {\r\n      this.someProperty += 2;\r\n    }\r\n  }\r\n\r\n  activateEvent(someElement: Element) {\r\n    someElement.addEventListener('click', this.clickEventHandler);\r\n  }\r\n}\r\n```\r\n\r\n* **Hacky - Get an instance from the DI container**\r\n```typescript\r\nexport class SomeClass {\r\n  someProperty: number = 0;\r\n\r\n  activateEvent(someElement: Element) {\r\n    someElement.addEventListener('click', this.clickEventHandler);\r\n  }\r\n\r\n  clickEventHandler(event: Event) {\r\n    let self: SomeClass = Container.instance.get(SomeClass);\r\n    self.someProperty += 2;\r\n  }\r\n}\r\n```\r\n\r\n* **Tweaky - Use the language to help**\r\n```typescript\r\nexport class SomeClass {\r\n  someProperty: number = 0;\r\n\r\n  activateEvent(someElement: Element) {\r\n    someElement.addEventListener('click', this.clickEventHandler);\r\n  }\r\n\r\n  clickEventHandler = (event: Event) => {\r\n    this.someProperty += 2;\r\n  }\r\n}\r\n```"}}
{"actor":{"display_login":"SebGX"}}