>--> This

[Drycodez]

this keyword, is supposed to refer >--> to the Object itself, but if it is in a regular function, it refers >--> to the object that calls it. The example below dont seems to work:

function C(){this.style.color="blue"}<input type="submit" value="color" onclick="C()"/>

since the fuction is not an object but just a function, it is supposed to change the botton text color="red". What do you think about this? Or am i wrong?

[ShadowMage]

When you assign handlers in the HTML attribute, it creates an anonymous function that executes the code you provide. It would look something like this if done strictly in JavaScript (I am assuming an id of 'myInput' on your input):

document.getElementById('myInput').onclick = function() { C(); }

Assigns the anonymous function as the handler What you want is this:

document.getElementById('myInput').onclick = C;

Assigns the function C as the handler You can get around that by passing this as an argument to C with something like this:

function C(el) { el.style.color = "blue" }<input type="submit" value="color" onclick="C(this)" />

which would then look like this if done in JavaScript:

document.getElementById('myInput').onclick = function() { C(this); }

EDIT:Here's a good article on the this keyword:http://www.quirksmode.org/js/this.html

[Drycodez]

I got that! I guesx what i was trying toDO does't work that way. Thanks SM!

[Don E]

Hey Shadow, What you suggested, is using addEventListener another way of doing what you suggested?

window.onload = function init(){	  var input = document.getElementById('myInput'); if (input.addEventListener)   // all browsers except IE before version 9{	 input.addEventListener ("click", function(){C(input)}, false);}else{	 if (input.attachEvent) // IE before version 9	 {  		  input.attachEvent ("onclick", function(){C(input)});	  }} } function C(el){	 el.style.color = "blue";}

Thanks.

[ShadowMage]

...is using addEventListener another way of doing what you suggested?

That should work also. addEventListener is the "correct" way to assign handlers to events, according to the W3C. The traditional method (ie, elem.onclick = handler) isn't wrong, it's just not as powerful as addEventListener. The problem is that older versions of IE do not support addEventListener, so a lot of developers stick to the traditional method.

[Don E]

I see. I noticed though that w3schools.com doesn't have anything on addEventListener not unless I didn't look correct. I even used the search. Do you happen to know if they do or not? It's okay if they don't because I understand how to use addEventListener, but I find it a bit strange if they don't have it anywhere in the JS, DOM tutorials etc.

[ShadowMage]

It's possible it isn't listed. While it might be close, W3Schools' reference is not 100% complete. There are several things I haven't been able to find in their references and had to go look through Mozilla's MDN documents.

[Ingolme]

"this" will not work as expected when using addEventListener. If you want to refer to the element, you're going to have to obtain a property of the event object that is passed to the handler.

function handler(e) {  // "e" is set automatically by the event dispatcher  // In Internet Explorer, "e" doesn't exist, instead it uses a global "window.event"  e = e ? e : window.event;  // Internet Explorer uses e.srcElement to access the element that fired the event  // Standard browsers use e.target to access the element that fired the event  // Standard browsers use e.currentTarget to access the element that was listening for the event  // Internet Explorer has no equivalent to currentTarget  el = e.target ? e.target : e.srcElement;  // Run some more code}

The problem with e.target / e.srcElement is that it won't always give you the element you're looking for. If you have a link with an image in it, even though you assign the event to the <a> element, the <img> inside it will be the target, because that's the element that was actually clicked on. This is why you use currentTarget. Since Internet Explorer doesn't have a currentTarget property, there's really no solution. The only way to get the actual element you want is to not use attachEvent and just set the "onclick" property of the element, so that you can access that element using "this"