- 浏览: 89208 次
- 性别:
- 来自: 武汉
文章分类
最新评论
-
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 4500同时欢迎到我的BLOG讨 ... -
ScriptDoc的Notation规则
2010-01-23 19:37 1773这个还是蛮重要的,以前就一直很羡慕Java有一套标准来着: 转 ... -
关于google.setOnLoadCallback()的一点研究
2010-01-12 10:01 6132google.setOnLoadCallback()是goog ... -
ECMA 推出 JavaScript 5
2009-12-28 21:17 1623转发自http://www.comsharp.co ... -
Javascript 事件编程 (一)
2009-09-04 15:27 1255Events and Event Handling 事件和事件 ... -
Javascript CSS编程 (一)元素定位、透明、内联样式
2009-09-03 14:29 2060Querying Element Position and S ... -
Javascript CSS编程 (二)Computed Styles、Class修改、操作样式表
2009-09-03 13:15 5328Scripting Computed Styles 计算样式 ... -
Javascript DHTML动画
2009-09-03 13:00 1215JS实现的动画效果多半 ... -
Javascript IE4 DOM
2009-09-02 17:14 1013很多IE独有的DOM特性是沿袭自IE4的,所以有必要看看IE4 ... -
Javascript 操控选择文本
2009-09-02 17:02 1252Querying Selected Text 查询选择的文本 ... -
Javascript 寻找文档元素
2009-09-02 16:51 2303Finding Elements in a Document ... -
Javascript 窗口的几何关系和相关方法、属性
2009-09-02 10:47 1115Window Geometry 窗口几何关系 引用Scree ... -
JavaScript window下面的常用函数、属性
2009-09-02 10:30 1155我们常用的一些函数都是全局对象window下面的。这里将其梳理 ... -
JavaScript 在浏览器中的相关概念:执行环境、引入脚本、安全策略等
2009-09-02 09:32 1368The Window as Global Execution ... -
JavaScript Namespace模拟
2009-07-15 18:53 1555做JavaScript的大型项目比较痛苦,它没有namespa ... -
JavaScript Class模拟深入 - Duck Typing 和 Class相关的工具类
2009-07-15 17:16 1768Duck Typing 引用If it implements ... -
JavaScript 判定对象类型
2009-07-15 16:53 1356判定JS的对象类型基本 ... -
JavaScript Class模拟深入 - 继承、子类
2009-07-15 16:27 1705Superclasses and Subclasses ... -
javascript this 关键字小提示
2009-07-14 22:01 1175来自:http://www.macji.com/2009/01 ... -
JavaScript Class模拟基础
2009-07-14 16:39 1119Simulating Classes in JavaScrip ...
相关推荐
JavaScript高级编程 pdfJavaScript高级编程 pdfJavaScript高级编程 pdfJavaScript高级编程 pdf
JavaScript DOM编程艺术 --全
javascript函数式编程 javascript函数式编程 javascript函数式编程
javascript网络编程基础教程,javascript网络编程基础教程,javascript网络编程基础教程
JavaScriptDOM编程艺术(第2版)PDF版本下载
JavaScript DOM编程艺术,高清资源,无比经典,值得拥有
JavaScript_DOM编程艺术第二版(中文),欢迎下载,111111111111111111111
经典之作《javascript dom编程艺术》源码。通过一个实际案例,讲述了原生的javascript操作dom的使用方法,以及操作dom中应该注意的一些事项。
JavaScript DOM编程艺术第二版,最适合新手入门的JavaScript书籍。
Javscript高性能编程+Javascript异步编程 高清晰PDF
JavaScriptDOM编程艺术第二版PDF扫描文档及各章节代码内容。
第1章 JavaScript简史 1.1 JavaScript的起源 1.2 DOM 1.3 浏览器战争 1.3.1 DHTML 1.3.2 浏览器之间的冲突 1.4 制定标准 1.4.1 浏览器以外的考虑 1.4.2 浏览器战争的结局 1.4.3 崭新的起点 1.5 小结 第2章 ...
JavaScript异步编程 设计快速响应的网络应用
第5章 JavaScript编程技术 5.1 JavaScript编程基础 5.1.1 JavaScript简介 5.1.2 Javascript的使用方法 5.1.3 语法规则 5.1.4 运算符和表达式 5.1.5 函数 5.1.6流程控制 5.1.7 事件处理 5.2 JavaScript对象编程 5.2.1...
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个...
本 书在简洁明快地讲述JavaScript和DOM的基本知识之后,通过几个实例演示了专业水准的网页开发技术,透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践,并全面探讨了HTML5以及jQuery等JavaScript库...
从颇具深度的JavaScript语言基础到作用域(链),从引用类型到面向对象编程,从极其灵活的匿名函数到闭包的内部机制,从浏览器对象模型(BOM)、文档对象模型(DOM)到基于事件的Web脚本设计,从XML(E4X)到Ajax及JSON,从...
javascript高效编程和函数式编程指南书籍PDF,适合深入学习javascript
JavaScript.DOM编程艺术(第2版)附录及源码,JavaScript.DOM编程艺术(第2版)附录及源码
JavaScript 编程精解 中文第三版 JavaScript 编程精解 中文第三版