`
robinqu
  • 浏览: 90242 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

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对象是在作用域链上的。
    分享到:
    评论

    相关推荐

      JavaScript高级编程 pdf

      "JavaScript高级编程"这本书深入探讨了这门语言的高级特性和最佳实践,旨在帮助开发者提升技能水平,实现更高效、更可靠的代码编写。以下是该书可能涵盖的一些关键知识点: 1. **基础语法**:包括变量、数据类型...

      JavaScript DOM编程艺术(第2版pdf)+源代码

      JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍,专注于讲解如何使用JavaScript与Document Object Model(DOM)进行交互。DOM是Web页面的结构化表示,它允许我们通过编程方式操纵HTML和XML...

      JavaScript DOM编程艺术【第2版&高清】.pdf

      要精通DOM编程,首先要对JavaScript语言本身有足够的理解,包括变量、数据类型、运算符、函数、对象、事件等基础知识。 2. DOM概念:DOM(Document Object Model)是一个跨平台和语言独立的接口,允许程序和脚本...

      JavaScript DOM编程艺术.pdf

      书中强调了一些至关重要的JavaScript编程原则和最佳实践,例如预留退路、循序渐进和以用户为中心。这些原则对于前端Web开发至关重要,因为它们不仅指导开发者编写更加健壮和可维护的代码,还帮助开发者更好地理解...

      JavaScriptDOM编程艺术(第2版)PDF版本下载.txt

      根据提供的文件信息,我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术(第2版)》。尽管实际书籍内容并未给出,但从标题、描述及部分链接信息来看,这本书主要涉及JavaScript...

      javascript网络编程基础教程

      JavaScript网络编程基础教程主要涵盖了利用JavaScript进行Web开发中的网络交互技术。这门教程旨在帮助初学者理解并掌握JavaScript在网络环境中的应用,使开发者能够构建功能丰富的动态网页和应用程序。JavaScript,...

      随书光盘+PDF JavaScript DOM编程艺术(第2版)-源代码2.5MB PDF114MB .zip

      JavaScript DOM编程艺术(第2版)是一本深受开发者欢迎的书籍,主要涵盖了JavaScript语言在Web前端开发中的应用,特别是关于DOM(Document Object Model)的深入理解和实践。这本书的随书光盘包含了源代码和PDF电子版...

      Javascript时尚编程百例

      JavaScript,作为全球最广泛使用的脚本...无论你是初学者还是经验丰富的开发者,都可以从中受益匪浅,不断提升自己的JavaScript编程水平。通过系统地学习和实践这百个例子,你将能够更好地应对各种复杂的Web开发挑战。

      JavaScriptDOM编程艺术第二版

      JavaScript DOM编程艺术第二版是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍,主要面向希望提升JavaScript技能并掌握网页动态效果开发的Web开发者。DOM是HTML和XML文档的编程接口,它允许...

      javascript函数式编程

      JavaScript函数式编程是利用JavaScript语言编写函数式风格代码的一种编程范式。函数式编程强调使用纯函数、避免副作用、函数的不可变性以及利用高阶函数等概念。通过阅读《JavaScript函数式编程指南》,读者可以了解...

      JavaScript.DOM编程艺术(第2版)附录及源码.rar

      《JavaScript.DOM编程艺术(第2版)》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是Web开发中的核心组件,它允许程序员通过JavaScript来操作HTML和XML文档的结构、内容和样式。这本书...

      JavaScript DOM编程艺术(中文第2版).pdf

      javascript入门必备,本书讲述了JavaScript和DOM的基础知识,但重点放在DOM编程技术背后的思路和原则:预留退路、循序渐进和以用户为中心等,这些概念对于任何前端Web开发工作都非常重要。本书将这些概念贯穿在书中...

      经典之作javascript dom编程艺术源码

      JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍,它的源码提供了丰富的实例,帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM(Document Object Model)是HTML和XML文档的标准表示,它将...

      Javascript异步编程(英文版)

      《JavaScript异步编程》这本书深入探讨了现代JavaScript开发中的关键主题——如何在不陷入混乱的情况下处理并发和并发任务。本书作者Trevor Burnham通过精确平衡的浏览器端和服务器端示例,为读者提供了一份简洁的...

      Javscript高性能编程+Javascript异步编程

      二、JavaScript异步编程 1. **回调函数**:JavaScript的基础异步处理方式,但容易导致回调地狱,使得代码难以理解和维护。 2. **Promise**:为解决回调地狱而引入,提供了一种链式调用的方式,使异步代码更易读,...

      JavaScript DOM编程艺术第二版(英文).pdf

      首先,我们可以从标题和描述中得知,本文档主要涉及的知识点是关于JavaScript和DOM(文档对象模型)的编程实践。...通过这本书,新手开发者可以逐渐建立起扎实的JavaScript编程基础,并能够应用于实际的Web开发工作中。

      JavaScript函数式编程.pdf

      不过,由于【标题】中提供了文档的名称——"JavaScript函数式编程.pdf",我可以根据这个名称扩展出关于JavaScript函数式编程的知识点。 JavaScript函数式编程的知识点非常丰富,涉及很多方面的内容,下面将详细介绍...

      JavaScript异步编程g.pdf

      本书《JavaScript异步编程》作为图灵程序设计丛书的一部分,主要介绍了异步处理的基本技巧,如PubSub(发布/订阅模式)、事件模式以及Promises(承诺对象)等。 在前端JavaScript中,PubSub是一种设计模式,允许将...

      WEB页编程技巧──JavaScript事件的应用.pdf

      二、JavaScript事件分类 JavaScript事件可以分为九种,分别是: 1. Click事件:用户点击鼠标按钮时触发的事件。 2. Load事件:WEB页加载完成时触发的事件。 3. Mouseover事件:鼠标指针移到元素上时触发的事件。 4...

    Global site tag (gtag.js) - Google Analytics