The Introduction
This article will hopefully save your day. If you are JavaScript beginner, by having read this article, you might find it enlightening and might help you removing confusion which I was going through when registering events on my HTML elements.
The Problem
One of the most powerful JavaScript keyword is ‘this’. Unfortunately it is hard to use it if you don’t exactly know how it works.
The Solution
Here we will be going via more approaches how to deal with ‘this’ keyword and where all that confusion comes up.
Owner
What does ‘this’ refer to in the function doSomething()?
function doSomething() {
this.style.color = '#cc0000';
}
In JavaScript ‘this’ always refers to the owner of the function we are executing, or rather, to the object that a function is a method of. When we define our faithful function doSomething() in a page, its owner is the page, or rather, the window object(or global object) of JavaScript. An onclick property though, is owned by the HTML element it belongs to.
‘this’ in onclick() function looks at HTML element
‘this’ in unattended function looks at page
Coping
So if we want to use ‘this’ to its full extent we have to take care that the function that uses it is owned by the correct HTML element. In other words, we have to copy the function to our onclick property. For this purpose we are using event registration model.
element.onclick = doSomething;
The function is copied in its entirely to the onclick property which now becomes a method. So if the event handler is executed ‘this’ referes to the HTML element and its colour has changed.
Referring
However, If you use inline event registration
<element onclick="doSomething()">
You do not copy the function! Instead, you refer to it, and the difference is crucial. The onclick property does not contain the actual function, but merely a functional call:
doSomething();
So it says ‘go to doSomething()’ and execute it. When we arrive at doSomething() the ‘this’ keyword once again refers to the global window object and the function returns error messages.
Combination
If you want to use ‘this’ for accessing the HTML element that is handling the event, you must make sure that the ‘this’ keyword is actually written into the onclick property. Only in that case does it refer to the HTML element the event handler is registered to. When you write
element.onclick = doSomething;
you get
function doSomething(){
this.style.colr='#cc0000';
}
and when you write
<element onclick="doSomething()">
you get
function onclick(){
doSomething();
}
When using inline event registration you can also send ‘this’ to the function so that you can still use it:
<element onclick="doSomething(this)">
function doSomething(obj) {
//this is present in the event handler and is sent to the function
//obj now refers to the HTML element, so we can do
obj.style.color='#cc0000';
}
The Conclusion
Finally just keep on your mind two questions:
- How do I register my function to event property? Event registration model or inline?
- How do I call my function which working with ‘this’ keyword? Is your function unattended?
I hope this helps you to understand the problem and avoid that with smile:)