Javascript 事件编程 （二）

Event Handlers and the this Keyword
事件处理程序和this关键字

引用

When your event handler is invoked, it is invoked as a method of the element on which the event occurred, so the this keyword refers to that target element. This behavior is useful and unsurprising.

Be sure, however, that you understand the implications. Suppose you have an object o with a method mymethod. You might register an event handler like this:

事件处理程序被调用的时候,是作为目标对象的一个方法;所以this关键字是指向目标元素的.这个行为是非常有用的也非常令人吃惊.

这里面有很多的隐含意义. 假设你有一个带有一些方法的对象,你可能会把事件处理程序注册成这个样子:

button.onclick= o.mymethod;

引用

This statement makes button.onclick refer to the same function that o.mymethod does. This function is now a method of both o and button. When the browser triggers this event handler, it invokes the function as a method of the button object, not as a method of o. The this keyword refers to the Button object, not to your object o. Do not make the mistake of thinking you can trick the browser into invoking an event handler as a method of some other object. If you want to do that, you must do it explicitly, like this:

这句话让botton.click指向了o.mymethod这个方法.在button的click事件触发的时候,mymethod是作为button的一个方法来执行的,而不是作为o的方法.
因此,this关键字也是指向Button对象,而不是对象o.
你就不可能以触发事件处理器的方法来运行一个对象的方法.如果不得不这么做,你必须显示的声明:

button.onclick = function( ) { o.mymethod( ); }

Scope of Event Handlers
事件处理函数的作用域

引用

When you define an event handler by setting the value of an HTML attribute to a string of JavaScript code, you are implicitly defining a JavaScript function.

Event handlers defined as HTML attributes have a more complex scope chain than this. The head of the scope chain is the call object.
The head of the scope chain is the call object. Any arguments passed to the event handler are defined here), as are any local variables declared in the body of the event handler.

The next object in an event handler's scope chain isn't the global object, however; it is the object that triggered the event handler.

我们在HTML中指定事件处理函数的时候，你是隐式地声明了一个函数。
这个函数的作用域链是相当复杂的。作用域链的头部是调用对象（里面包含了传给函数的参数、事件处理函数内部声明的局部变量等）。

但作用域链的下一个对象不是全局函数，而是触发事件的对象。

<form>
  <!-- In event handlers, "this" refers to the target element of the event -->
  <!-- So we can refer to a sibling element in the form like this -->
  <input id="b1" type="button" value="Button 1"
         onclick="alert(this.form.b2.value);">
  <!-- The target element is also in the scope chain, so we can omit "this" -->
  <input id="b2" type="button" value="Button 2"
         onclick="alert(form.b1.value);">
  <!-- And the <form> is in the scope chain, so we can omit "form". -->
  <input id="b3" type="button" value="Button 3"
         onclick="alert(b4.value);">
  <!-- The Document object is on the scope chain, so we can use its methods -->
  <!-- without prefixing them with "document". This is bad style, though. -->
  <input id="b4" type="button" value="Button 4"
         onclick="alert(getElementById('b3').value);">
</form>

引用

As you can see from this sample code, the scope chain of an event handler does not stop with the object that defines the handler: it proceeds up the containment hierarchy and includes, at a minimum, the HTML <form> element that contains the button and the Document object that contains the form.

The final object in the scope chain is the Window object, because it always is in client-side JavaScript.

在上面的例子当中，事件处理函数的作用域链并没有在定义事件处理函数的对象上就停止了；而是继续沿着文档树衍生，至少它到达了<form>元素，而<form>元素是包含按钮等表单元素；紧接着的是document对象；作用域链的最后一个对象是Window对象，这个在客户端JS中是一致的。

<input id="b3" type="button" value="Button 3"
       onclick="alert(b4.value);">

其等效的JS代码如下:

var b3 = document.getElementById('b3'); // Find the button we're interested in
b3.onclick = function( ) {
    with (document) {
        with(this.form) {
            with(this) {
                alert(b4.value);
            }
        }
    }
}

引用

In an event handler defined as an HTML attribute, however, the Document object is in the scope chain before the Window object, and using open by itself refers to the document.open( ) method. Similarly, consider what would happen if you added a property named window to a Form object (or defined an input field with name="window"). If you then define an event handler within the form that uses the expression window.open( ), the identifier window resolves to the property of the Form object rather than the global Window object

在HTML中的特性中设定事件处理函数中，Document对象在作用域链的位置是在window对象前面的；这意味着如果有一个name为window的元素将会迫使Window对象无法访问。例如一个表单有一个name值为window的表单，当你在表单的处理函数中使用window.open()是无济于事的。

引用

Since there is no standard for the precise composition of the scope chain of an event handler, it is safest to assume that it contains only the target element and the global Window object. For example, use this to refer to the target element, and when the target is an <input> element, feel free to use form to refer to the containing Form object instead of this.form. However, don't rely on the Form or Document objects being in the scope chain

If you specify an event handler by assigning a function to an appropriate JavaScript event-handler property, there is no special scope chain involved

由于关于作用域链的详细组成没有详细的标准，我们应该谨慎地认为它只包含目标元素和全局对象。比如使用this去引用当前触发事件的对象。当目标是一个<input>元素的时候，你可以直接用from属性直接引用表单而不是this.form；但是不要指望能够Form和Document对象是在作用域链上的。