PPK talk about JavaScript this keyword [translate]_javascript tips

Let's talk about how to Event Handling(event handling), and then another use of this.

Oneself itself

Let's take a look at this in the function dosomething () exactly what is pointing to (refer to)?

function dosomething () {
  this.style.color = ' #cc0000 ';
}

The This of JavaScript always points to the function "itself" that is running. In other words, it is a way of pointing to a function object. Define the DoSomething () function in the page itself, which refers to the page. In other words, it refers to the JavaScript window object (Global object). The OnClick property itself is owned by HTML elements.

This "ownership" is the consequence of the OO (object-oriented) nature of JavaScript. There is more information on the object as an associative array page.

------------window--------------------------------------
|                     / \      |
|                      |      |
|                     This     |
|  ----------------            |      |
|  | HTML Element | <--this     -----------------|
|  ----------------   |      | DoSomething () |      | | | ----------------- |
|     --------------------             |
|     | OnClick Property |     | | --------------------             |
|                            |
----------------------------------------------------------

If the dosomething () runtime does not have any reservations associated with it, the keyword this points to window (window), which changes the window's style.color. Windows does not have an object like style, so the function throws a JavaScript error.

Copy (copying)

Therefore, it is somewhat difficult to use this good. In this case, as in the example above used in the function, it should point to the HTML element "itself". In other words, there is a function copy pointing to the onclick attribute. Let's take a look at the situation in the traditional event registration .

Element.onclick = dosomething;

Because the copy of the function points to the onclick attribute (now the method), this points to the HTML element and changes the color when the event handler is executed.

------------window--------------------------------------
|  | | ----------------                   |
|  | HTML Element | <--this     -----------------|
|  ----------------   |      | DoSomething () |      | | | ----------------- |
|     -----------------------     |      |
|     | Copy of DoSomething () | <--copy function  |
|     -----------------------            |
|                            |
----------------------------------------------------------

This allows us to handle multiple events and give it a copy of the function. Each time this will point to the correct HTML element:

------------window--------------------------------------|                            |
|                            |
|  |
|  ----------------                   |
| | HTML Element |  <--This-----------------| |      ----------------   | |        DoSomething () | | |     |      |     ----------------- |
|      -----------------------     |     |
| |copy of dosomething () |     <--Copy Function | |      -----------------------     |                      |
|      |  |
|      -----------------------         |  |
| | Another HTML element|      <--This |  |
|      -----------------------   |      |        |
|        |      |      |     |
|      -----------------------     |     |
| |copy of dosomething () |     <--Copy Function | |                            -----------------------            |
|
| ----------------------------------------------------------

Each time a function is called, this points to the HTML element of the event that is currently being handled (a copy of the "own itself" dosomething ()).

Point (referring)

What if you register with inline events ?

<element onclick= "dosomething ()" >

There is no copy function here, but it points to it, what's different? This onclick property does not contain the actual function, but is just a function call.

DoSomething ();

The above means: "to dosomething () there to execute it." Inside the dosomething (), the This keyword points again to the global Window object, and the function returns the wrong message.

------------window--------------------------------------
|                     / \      |
|                      |      |
|                     This     |
|  ----------------            |      |
|  | HTML Element | <--this     -----------------|
|  ----------------   |      | DoSomething () |      | | | ----------------- |
|     -----------------------     /\      |
|
| | |     | | | | | | |   |----reference to   | |     -----------------------    function                            |
| | ----------------------------------------------------------

Not the same?

If you use this to access an HTML element to handle an event, you must be sure that it is actually written to the onclick attribute. And it points to the HTML element's event handling even if it is registered. If you do this:

Element.onclick = dosomething;
Alert (Element.onclick)

Get is

function dosomething ()
{
	This.style.color = ' #cc0000 ';
}

As you can see, the This keyword is in the OnClick method. It points to an HTML element.

But if you do this:

<element onclick= "dosomething ()" >
alert (Element.onclick)

Get is

function onclick ()
{
	dosomething ()
}

Here just point to function dosomething (). The This keyword is not in the OnClick method. It does not point to HTML elements.

Example-copies

In the following example, this is written to the OnClick method:

Element.onclick = function () {dosomething ()}
element.attachevent (' onclick ', dosomething)
<element Onclick= "dosomething ()" >

Example-point

In the following example, this points to window:

Element.onclick = function () {dosomething ()}
element.attachevent (' onclick ', dosomething)
<element Onclick= "dosomething ()" >

Pay attention to the attachevent above. Its disadvantage is the Microsoft Event Registration Model , which creates a pointer to the function and does not copy it. So sometimes it's impossible to figure out which HTML is currently handling the event.

Combine

When registering with inline events, you can also send this to a function. So you can use this:

<element onclick= ' dosomething (this) ' >
 
function dosomething (obj) {
	//This are present in the event handler a ND is sent to the function
	//obj now refers to the HTML element, so we can do
	obj.style.color = ' #cc0000 ';
}