- 浏览: 90395 次
- 性别:
- 来自: 武汉
文章分类
最新评论
-
zhaohaolin:
哟,龙哥,你还搞C,好高大上的东西啊
xcode初探 -
robinqu:
又改了一些小错误~
[更新20100922]jQuery Location Select 插件- 地址联动、地理检测 -
robinqu:
kimm 写道这个功能不错,就是应用有点局限,内网就不好用了。 ...
[更新20100922]jQuery Location Select 插件- 地址联动、地理检测 -
robinqu:
更新了⋯⋯把代码重写了一次⋯⋯大家可以实现任何种类的联动,以及 ...
[更新20100922]jQuery Location Select 插件- 地址联动、地理检测 -
robinqu:
truth315 写道不好意思了,compu指的是getAre ...
JavaScript Prototype基础
Event Handlers and the this Keyword
事件处理程序和this关键字
事件处理程序被调用的时候,是作为目标对象的一个方法;所以this关键字是指向目标元素的.这个行为是非常有用的也非常令人吃惊.
这里面有很多的隐含意义. 假设你有一个带有一些方法的对象,你可能会把事件处理程序注册成这个样子:
这句话让botton.click指向了o.mymethod这个方法.在button的click事件触发的时候,mymethod是作为button的一个方法来执行的,而不是作为o的方法.
因此,this关键字也是指向Button对象,而不是对象o.
你就不可能以触发事件处理器的方法来运行一个对象的方法.如果不得不这么做,你必须显示的声明:
Scope of Event Handlers
事件处理函数的作用域
我们在HTML中指定事件处理函数的时候,你是隐式地声明了一个函数。
这个函数的作用域链是相当复杂的。作用域链的头部是调用对象(里面包含了传给函数的参数、事件处理函数内部声明的局部变量等)。
但作用域链的下一个对象不是全局函数,而是触发事件的对象。
在上面的例子当中,事件处理函数的作用域链并没有在定义事件处理函数的对象上就停止了;而是继续沿着文档树衍生,至少它到达了<form>元素,而<form>元素是包含按钮等表单元素;紧接着的是document对象;作用域链的最后一个对象是Window对象,这个在客户端JS中是一致的。
其等效的JS代码如下:
在HTML中的特性中设定事件处理函数中,Document对象在作用域链的位置是在window对象前面的;这意味着如果有一个name为window的元素将会迫使Window对象无法访问。例如一个表单有一个name值为window的表单,当你在表单的处理函数中使用window.open()是无济于事的。
由于关于作用域链的详细组成没有详细的标准,我们应该谨慎地认为它只包含目标元素和全局对象。比如使用this去引用当前触发事件的对象。当目标是一个<input>元素的时候,你可以直接用from属性直接引用表单而不是this.form;但是不要指望能够Form和Document对象是在作用域链上的。
事件处理程序和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:
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.
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
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对象是在作用域链上的。
发表评论
-
WebApp在移动端的涅盘- 另类的移动端应用程序开发
2010-09-27 22:35 4517同时欢迎到我的BLOG讨 ... -
ScriptDoc的Notation规则
2010-01-23 19:37 1789这个还是蛮重要的,以前就一直很羡慕Java有一套标准来着: 转 ... -
关于google.setOnLoadCallback()的一点研究
2010-01-12 10:01 6154google.setOnLoadCallback()是goog ... -
ECMA 推出 JavaScript 5
2009-12-28 21:17 1648转发自http://www.comsharp.co ... -
Javascript 事件编程 (一)
2009-09-04 15:27 1272Events and Event Handling 事件和事件 ... -
Javascript CSS编程 (一)元素定位、透明、内联样式
2009-09-03 14:29 2083Querying Element Position and S ... -
Javascript CSS编程 (二)Computed Styles、Class修改、操作样式表
2009-09-03 13:15 5376Scripting Computed Styles 计算样式 ... -
Javascript DHTML动画
2009-09-03 13:00 1241JS实现的动画效果多半 ... -
Javascript IE4 DOM
2009-09-02 17:14 1029很多IE独有的DOM特性是沿袭自IE4的,所以有必要看看IE4 ... -
Javascript 操控选择文本
2009-09-02 17:02 1280Querying Selected Text 查询选择的文本 ... -
Javascript 寻找文档元素
2009-09-02 16:51 2336Finding Elements in a Document ... -
Javascript 窗口的几何关系和相关方法、属性
2009-09-02 10:47 1142Window Geometry 窗口几何关系 引用Scree ... -
JavaScript window下面的常用函数、属性
2009-09-02 10:30 1216我们常用的一些函数都是全局对象window下面的。这里将其梳理 ... -
JavaScript 在浏览器中的相关概念:执行环境、引入脚本、安全策略等
2009-09-02 09:32 1389The Window as Global Execution ... -
JavaScript Namespace模拟
2009-07-15 18:53 1576做JavaScript的大型项目比较痛苦,它没有namespa ... -
JavaScript Class模拟深入 - Duck Typing 和 Class相关的工具类
2009-07-15 17:16 1797Duck Typing 引用If it implements ... -
JavaScript 判定对象类型
2009-07-15 16:53 1386判定JS的对象类型基本 ... -
JavaScript Class模拟深入 - 继承、子类
2009-07-15 16:27 1735Superclasses and Subclasses ... -
javascript this 关键字小提示
2009-07-14 22:01 1194来自:http://www.macji.com/2009/01 ... -
JavaScript Class模拟基础
2009-07-14 16:39 1149Simulating Classes in JavaScrip ...
相关推荐
"JavaScript高级编程"这本书深入探讨了这门语言的高级特性和最佳实践,旨在帮助开发者提升技能水平,实现更高效、更可靠的代码编写。以下是该书可能涵盖的一些关键知识点: 1. **基础语法**:包括变量、数据类型...
JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍,专注于讲解如何使用JavaScript与Document Object Model(DOM)进行交互。DOM是Web页面的结构化表示,它允许我们通过编程方式操纵HTML和XML...
要精通DOM编程,首先要对JavaScript语言本身有足够的理解,包括变量、数据类型、运算符、函数、对象、事件等基础知识。 2. DOM概念:DOM(Document Object Model)是一个跨平台和语言独立的接口,允许程序和脚本...
JavaScript DOM编程艺术第二版是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍,主要面向希望提升JavaScript客户端开发技能的程序员。DOM是Web页面的结构化表示,JavaScript通过DOM API可以...
根据提供的文件信息,我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术(第2版)》。尽管实际书籍内容并未给出,但从标题、描述及部分链接信息来看,这本书主要涉及JavaScript...
JavaScript网络编程基础教程主要涵盖了利用JavaScript进行Web开发中的网络交互技术。这门教程旨在帮助初学者理解并掌握JavaScript在网络环境中的应用,使开发者能够构建功能丰富的动态网页和应用程序。JavaScript,...
JavaScript DOM编程艺术(第2版)是一本深受开发者欢迎的书籍,主要涵盖了JavaScript语言在Web前端开发中的应用,特别是关于DOM(Document Object Model)的深入理解和实践。这本书的随书光盘包含了源代码和PDF电子版...
JavaScript,作为全球最广泛使用的脚本...无论你是初学者还是经验丰富的开发者,都可以从中受益匪浅,不断提升自己的JavaScript编程水平。通过系统地学习和实践这百个例子,你将能够更好地应对各种复杂的Web开发挑战。
JavaScript DOM编程艺术第二版是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍,主要面向希望提升JavaScript技能并掌握网页动态效果开发的Web开发者。DOM是HTML和XML文档的编程接口,它允许...
JavaScript函数式编程是利用JavaScript语言编写函数式风格代码的一种编程范式。函数式编程强调使用纯函数、避免副作用、函数的不可变性以及利用高阶函数等概念。通过阅读《JavaScript函数式编程指南》,读者可以了解...
《JavaScript.DOM编程艺术(第2版)》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是Web开发中的核心组件,它允许程序员通过JavaScript来操作HTML和XML文档的结构、内容和样式。这本书...
javascript入门必备,本书讲述了JavaScript和DOM的基础知识,但重点放在DOM编程技术背后的思路和原则:预留退路、循序渐进和以用户为中心等,这些概念对于任何前端Web开发工作都非常重要。本书将这些概念贯穿在书中...
JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍,它的源码提供了丰富的实例,帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM(Document Object Model)是HTML和XML文档的标准表示,它将...
《JavaScript异步编程》这本书深入探讨了现代JavaScript开发中的关键主题——如何在不陷入混乱的情况下处理并发和并发任务。本书作者Trevor Burnham通过精确平衡的浏览器端和服务器端示例,为读者提供了一份简洁的...
二、JavaScript异步编程 1. **回调函数**:JavaScript的基础异步处理方式,但容易导致回调地狱,使得代码难以理解和维护。 2. **Promise**:为解决回调地狱而引入,提供了一种链式调用的方式,使异步代码更易读,...
不过,由于【标题】中提供了文档的名称——"JavaScript函数式编程.pdf",我可以根据这个名称扩展出关于JavaScript函数式编程的知识点。 JavaScript函数式编程的知识点非常丰富,涉及很多方面的内容,下面将详细介绍...
首先,我们可以从标题和描述中得知,本文档主要涉及的知识点是关于JavaScript和DOM(文档对象模型)的编程实践。...通过这本书,新手开发者可以逐渐建立起扎实的JavaScript编程基础,并能够应用于实际的Web开发工作中。
本书《JavaScript异步编程》作为图灵程序设计丛书的一部分,主要介绍了异步处理的基本技巧,如PubSub(发布/订阅模式)、事件模式以及Promises(承诺对象)等。 在前端JavaScript中,PubSub是一种设计模式,允许将...
二、JavaScript事件分类 JavaScript事件可以分为九种,分别是: 1. Click事件:用户点击鼠标按钮时触发的事件。 2. Load事件:WEB页加载完成时触发的事件。 3. Mouseover事件:鼠标指针移到元素上时触发的事件。 4...