EN
JavaScript - access this object inside event method
2
points
In this article, we would like to show you how to use this
in a proper way.
1. self
/ additional variable example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<button id="clicker">Click me!</button>
<script>
var handle = document.getElementById('clicker');
var MessageManager = {
message: 'This is example message...',
assignClickEvent: function(handle) {
var self = this;
handle.addEventListener('click', function() {
alert(self.message);
});
}
};
MessageManager.assignClickEvent(handle);
</script>
</body>
</html>
Note: this used inside click event function indicates for button element to solve this problem
self
variable has been used.
Result:
2. Function
bind
method example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<button id="clicker">Click me!</button>
<script>
var handle = document.getElementById('clicker');
var MessageManager = {
message: 'This is example message...',
assignClickEvent: function(handle) {
function onClick() {
alert(this.message);
}
handle.addEventListener('click', onClick.bind(this));
}
};
MessageManager.assignClickEvent(handle);
</script>
</body>
</html>
Note: by using
onClick.bind
method we create proxy instance foronClick
function that will be called later with new context - in this casethis
indicates toMessageManager
object.
Result:
3. ES6 and arrow function example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<button id="clicker">Click me!</button>
<script>
var handle = document.getElementById('clicker');
var MessageManager = {
message: 'This is example message...',
assignClickEvent: function(handle) {
handle.addEventListener('click', () => {
alert(this.message);
});
}
};
MessageManager.assignClickEvent(handle);
</script>
</body>
</html>
Note: with arrow function we can use still
this
with parent context.
Result: