Sample code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script language="javascript" type="text/javascript">
function init() {
var nodeList = document.getElementsByTagName("a");
var nodeArr = [];
for( var i = 0; i < nodeList.length; i++) // Copy NodeList to Array
nodeArr.push(nodeList[i]);
for( var i = 0; i < nodeArr.length; i++) // Loop over array
if( nodeArr[i].className == "clickLink" )
nodeArr[i].onclick = clickLink2; // Attach event function
}
window.onload = init; //Attach event function
function clickLink2() {
console.log("this: " + this); //Prints window URL in href
console.dir( this ); //show attributes of anchor
console.log( this.name ); // Prints name attribute
}
function clickLink( elem ) {
console.log( "this: " + this ); //Prints [object Window]
console.dir( this ); // Shows attributes, etc. al of [object Window]
console.log( "name: " + elem.name );
}
</script>
</head>
<body>
<!-- inline -->
<a href="#" name="blah1" onclick="clickLink(this); return false;">Test 1</a>
<a href="#" name="blah2" onclick="clickLink(this); return false;">Test 2</a>
<a href="#" name="blah3" onclick="clickLink(this); return false;">Test 3</a>
<a href="#" name="blah4" onclick="clickLink(this); return false;">Test 4</a>
<hr/>
<!-- not inline -->
<a href="#" name="blah5" class="clickLink">Test 5</a>
<a href="#?t" name="blah6" class="clickLink">Test 6</a>
<a href="#" name="blah7" class="clickLink">Test 7</a>
<a href="#" name="blah8" class="clickLink">Test 8</a>
</body>
</html>
I did the testing in firefox, with firebug to view the console output.
Now what I was wondering:
- Why in
clickLinkdoes this refer to the window object? - Why does this in
clickLink2print to console as the value of the href of the link? - Is there a better way to pass this to an unobtrusive attachment like this? how can you be sure what this refers to?
OK, so I took pieces from the answers here and found that this is a bit quirky in some browsers. Also that assigning a function to onclick is different then attaching (but unfortunately not all IE versions support that either see addEventListener vs attachEvent). For some reason older IE’s also make this inside the body of an event trigger function still refer to the window object instead of the caller. So I used event.srcElement. Here’s some new sample code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script language="javascript" type="text/javascript">
function init() {
var nodeList = document.getElementsByTagName("a");
var nodeArr = [];
for( var i = 0; i < nodeList.length; i++) // Copy NodeList to Array
nodeArr.push(nodeList[i]);
for( var i = 0; i < nodeArr.length; i++) // Loop over array
if( nodeArr[i].className == "clickLink" ) {
var a = nodeArr[i];
if (a.addEventListener) { //IE9, other browsers
a.addEventListener('click', clickLink2); // Attach event function
} else if (a.attachEvent) { //IE6,7,8, etc.
a.attachEvent('onclick', clickLink2 ); // Legacy IE Attach event function
}
a.onclick = function() { return false }; // override default onclick behavior for these anchors so URL is not followed
}
}
window.onload = init; //Attach event function
function clickLink2() {
if( typeof(event) != 'undefined' ) {
elem = event.srcElement; //IE < 8 keeps this as window object
} else {
elem = this;
}
alert( elem.name );
}
function clickLink( elem ) {
alert( elem.name );
}
</script>
</head>
<body>
<!-- inline -->
<a href="#" name="blah1" onclick="clickLink(this); return false;">Test 1</a>
<a href="#" name="blah2" onclick="clickLink(this); return false;">Test 2</a>
<a href="#" name="blah3" onclick="clickLink(this); return false;">Test 3</a>
<a href="#" name="blah4" onclick="clickLink(this); return false;">Test 4</a>
<hr/>
<!-- not inline -->
<a href="#" name="blah5" class="clickLink">Test 5</a>
<a href="#?t" name="blah6" class="clickLink">Test 6</a>
<a href="#" name="blah7" class="clickLink">Test 7</a>
<a href="#" name="blah8" class="clickLink">Test 8</a>
</body>
</html>
1) Why in clickLink does this refer to the window object?
Put simply: clickLink isn’t the event handler, by adding the attribute
onclickto the elements, you’re using the nativeonclickmethod as a handler that calls a function. this function is declared in the main scope, thus this points to the window object.To be clear: the behaviour is similar to this:
Making the actual event handler an anonymous function, not clickLink. That’s why this will point to window: the annonymous function, too, was declared in the global scope, thus the caller of clickLink is window.
2) Why does this in clickLink2 print to console as the value of the href of the link?
Think about this phrase ‘Javascript allows you to manipulate the DOM, the DOM-tree, all events and behaviours.’ In your init function, the elements onclick behaviour is manipulated. the default method of
onclickis being overruled, and replaced by theclickLink2method herenodeArr[i].onclick = clickLink2;.Look at it like this: all your elements have a prototype onclick method, that accepts a parameter. In the first case, this parameter is a string, that evaluates to a call to the
clickLinkfunction. The second case, however, the instances that have a particular class have their own onclick method, overruling the prototype’s onclick.I do hope this clears things up a bit for you. It’s easy once you grasp the basic philosophy behind events, handlers, methods, prototypes etc… and overcome the quirks of JS.
3) Is there a better way to pass this to an unobtrusive attachment like this? how can you be sure what this refers to?
Well, sort of answerd that above, didn’t I? but anyhow: if you define a method of an element or object yourself, in general, this will point to the owner object/element. If you rely on html and default behaviours, JS will mostly mind it’s own business and this will point to window.
I don’t know if this is an option, but maybe you could try something like this:this should -in theory- do the same thing as your init function
Edit:
A working alternative to the above:
Call defines the
pelement as the caller of clickLink, making this point to the element that called the function.