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.
xxxxxxxxxx1
2
<html>3
<body>4
<button id="clicker">Click me!</button>5
<script>6
7
var handle = document.getElementById('clicker');8
9
var MessageManager = {10
message: 'This is example message...',11
assignClickEvent: function(handle) {12
var self = this;13
14
handle.addEventListener('click', function() {15
alert(self.message);16
});17
}18
};19
20
MessageManager.assignClickEvent(handle);21
22
</script>23
</body>24
</html>Note: this used inside click event function indicates for button element to solve this problem
selfvariable has been used.
Result:
xxxxxxxxxx1
2
<html>3
<body>4
<button id="clicker">Click me!</button>5
<script>6
7
var handle = document.getElementById('clicker');8
9
var MessageManager = {10
message: 'This is example message...',11
assignClickEvent: function(handle) {12
13
function onClick() {14
alert(this.message);15
}16
17
handle.addEventListener('click', onClick.bind(this));18
}19
};20
21
MessageManager.assignClickEvent(handle);22
23
</script>24
</body>25
</html>Note: by using
onClick.bindmethod we create proxy instance foronClickfunction that will be called later with new context - in this casethisindicates toMessageManagerobject.
Result:
xxxxxxxxxx1
2
<html>3
<body>4
<button id="clicker">Click me!</button>5
<script>6
7
var handle = document.getElementById('clicker');8
9
var MessageManager = {10
message: 'This is example message...',11
assignClickEvent: function(handle) {12
13
handle.addEventListener('click', () => {14
alert(this.message);15
});16
}17
};18
19
MessageManager.assignClickEvent(handle);20
21
</script>22
</body>23
</html>Note: with arrow function we can use still
thiswith parent context.
Result:
