javaScript高级教程(二)Scope Chain & Closure Example
<!DOCTYPE html>
<html>
<head>
<meta charset=gb2312 />
<title>js</title>
<script>
//function语句在解析时会被提升，不管function语句放置在哪里，
//它都会被移动到所在作用域的顶层。
addEvent(window,'load',initAnchors); function initAnchors(){
for(var i=1; i<=3; i++){
var anchor = $('anchor'+i);
registerListener(anchor,i); //函数中函数，也就是闭包，registerListener可以保存外部变量的值。
}
};
/*
把事件处理函数注册到一个独立的函数中。 现在click事件处理函数的外部作用域变成了registerListener()函数。 每次调用registerListener()函数时都会生成该函数的一个副本，
以维护正确的变量作用域。
*/
function registerListener(anchor,i){
addEvent(anchor,'click',function(){
alert('my id is anchor'+i);
});
}
/*
因为i的值实际上是单击事件发生时才从作用域链中取得。
当单击事件必发生时，initAnchors()已经执行完毕（验证：在循环加入alert(i)后，打开网页会弹出三次框）。
此时i=4。所以alert会显示相同信息。 具体来说，当click事件处理函数被调用时，它会先在事件处理函数的内部作用域中查找i的值，
但click事件的匿名处理函数中没有定义i的值，所以它再到其外部作用域（initAnchors()函数）中查找。
而外部作用域中i=4。 function initAnchors(){
for(var i=1; i<=3; i++){
//alert(i);
var anchor = $('anchor'+i);
addEvent(anchor,'click',function(){
alert('my id is anchor'+i);
});
}
}; */
function addEvent( node, type, listener ) {
if (node.addEventListener) {
// W3C method
node.addEventListener( type, listener, false );
return true;
} else if(node.attachEvent) {
// MSIE method
//使用attachEvent()注册的回调函数没有Event参数，需要读取Window对象的event属性
//使用attachEvent()作为全局函数调用。而不是事件发生其上的文档元素的方法来调用
//也就是说attachEvent()注册的回调函数执行时，this指向window对象，而不是事件目标元素。
//下面修正这些问题
node['e'+type+listener] = listener;
node[type+listener] = function(){
node['e'+type+listener]( window.event );
} //IE事件模型不支持事件捕获，所以需要两个参数
node.attachEvent( 'on'+type, node[type+listener] ); return true;
} // Didn't have either so return false
return false;
}; function $() {
var elements = new Array(); // Find all the elements supplied as arguments
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i]; // If the argument is a string assume it's an id
if (typeof element == 'string') {
element = document.getElementById(element);
} // If only one argument was supplied, return the element immediately
if (arguments.length == 1) {
return element;
} // Otherwise add it to the array
elements.push(element);
} // Return the array of multiple requested elements
return elements;
};
</script>
</head> <body>
<ul>
<li><a href="#" id="anchor1">Anchor 1</a></li>
<li><a href="#" id="anchor2">Anchor 2</a></li>
<li><a href="#" id="anchor3">Anchor 3</a></li>
</ul> </body>
</html>
javaScript高级教程(二)Scope Chain & Closure Example的更多相关文章
- JavaScript高级教程
JavaScript高级教程 基础总结深入 数据类型 分类 you are so nb! undefined :undefined string :任意字符串 sybmol: object:任意对象, ...
- JavaScript 入门教程二 在HTML中使用 JavaScript
一.使用 <script> 元素的方式有两种:直接在页面中嵌入 JavaScript 代码和引用外部 JavaScript 文件. 二.使用内嵌方式,一般写法为: <script t ...
- JavaScript高级程序设计(二)：在HTML中使用JavaScript
一.使用<script>元素 1.<script>元素定义了6个属性: async:可选.表示应该立即下载脚本,但不应该妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本 ...
- 《JavaScript高级教程》学习笔记一、变量和数据类型
JavaScript的核心语言特性在ECMA-262中是以名为ECMAScript的伪语言的形式来定义的. 一.变量和数据类型 1. 变量 JavaSript是弱类型语言,可以通过var定义任何类型变 ...
- javaScript高级教程(八)-----正则表达式温故知新
1.RegExp对象:五个属性二个方法 五个属性:global, ignoreCase,multiline,lastIndex,source 二个方法: exec()--模式匹配 test()--检测 ...
- javaScript高级教程(七)正则表达式中括号三种常见作用
括号用来将子表达式标记起来,以区别于其他表达式 比如很多的命令行程序都提供帮助命令,键入 h 和键入 help 的意义是一样的,那么就会有这样的表达式: h(elp)? 字符h之后的elp可有可无这里 ...
- javascript高级语法二
一.BOM对象 1.什么是BOM对象? BOM是浏览器对象模型,核心对象就是window,所有浏览器都支持 window 对象.一个html文档对应一个window对象,主要功能是控制浏览器窗口的, ...
- JavaScript高级应用(二)（转）
1.组件是否安装 //组件是否安装 isComponentInstalled("{6B053A4B-A7EC-4D3D-4567-B8FF8A1A5739}", "com ...
- javascript高级教程：如何优化javascript代码性能
在web前端开发中,为实现一些动态效果,减小页面大小,我们一般都会使用JavaScript技术来进行相关设置.但是初学者在编写JavaScript代码的时候,往往都是比较低质的代码,那如何才能提高Ja ...
随机推荐
- 使用 CSV 文件存储
将爬取到的数据以 CSV 文件形式存储: import csv import requests req = requests.get("http://www.baidu.com/" ...
- requests 安装
requests 是用来发送 HTTP 请求的一个库,requests 是对 urllib 和 urllib2 进行封装的一个模块,用来取代 urllib 和 urllib2,可以使用以下两种方法安装 ...
- C#编码习惯谈
1. 避免将多个类放在一个文件里面.2. 一个文件应该只有一个命名空间,避免将多个命名空间放在同一个文件里面.3. 一个文件最好不要超过500行的代码(不包括机器产生的代码).4. 一个方法的 ...
- 剑指offer面试题6：重建二叉树
1.题目:输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树. public class Solution { public TreeNode reConstructBinaryTree(int ...
- php基础设计模式 注册树模式、工厂模式、单列模式
废话不多说了,先给大家介绍注册树模式然后介绍工厂模式最后给大家介绍单列模式,本文写的很详细,一起来学习吧. php注册树模式 什么是注册树模式? 注册树模式当然也叫注册模式,注册器模式.之所以我在这里 ...
- VC++进行窗口枚举
https://blog.csdn.net/u012372584/article/details/53735242 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...
- OpenCV——轮廓面积及长度计算
计算轮廓面积: double contourArea(InputArray contour, bool oriented=false ) InputArray contour:输入的点,一般是图像的轮 ...
- 支持向量机SVM进阶
本文适合于对SVM基本概念有一点了解的童鞋. SVM基本概念: 最大边缘平面--基本原理:结构风险最小化 分类器的泛化误差 支持向量 问题描述: 请对一下数据,利用svm对其进行分类. 最 ...
- CASE：DB shutdown/open 过程中发生异常导致JOB不能自动执行
CASE:DB shutdown/open 过程中发生异常导致JOB不能自动执行 现象: 一个DB中的所有JOB在3月25日之后就不再自动运行,查询DBA_JOBS,发现LAST_DATE定格在3月2 ...
- 【CF840D】Destiny 分治(线段树)
[CF840D]Destiny 题意:给你一个长度为n的序列,q次询问,每次指定l r k,求[l,r]中出现次数$>\frac {r-l+1} k$的所有数中最小的那个数. $n,q\le 3 ...