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 ...
随机推荐
- Hibernate系列之核心开发接口
一.概述 所有的hibernate应用中都会访问5个核心接口,它们分别是: Configuration:配置hibernate,创建SessionFactory对象 SessionFactory:初始 ...
- python之SQLAlchemy ORM
前言: 这篇博客主要介绍下SQLAlchemy及基本操作,写完后有空做个堡垒机小项目.有兴趣可看下python之数据库(mysql)操作.下篇博客整理写篇关于Web框架和django基础~~ 一.OR ...
- android linphone中opengl显示的实现
1,java层 在界面中创建GL2JNIView(基类为GLSurfaceView). 创建对象AndroidVideoWindowImpl,将GL2JNIView作为参数传入构造函数.在该对象中监听 ...
- 斐讯K2刷不死breed与第三方固件教程
本文主要就是简单的斐讯 K2 刷机教程,方便大家了解一下 K2 怎样刷固件.斐讯 K2 是一款 1200M AC 双频无线路由器,支持 5G 和 2.4G WiFi 信号,虽然缺少 USB 且只有百兆 ...
- POJ 2386 Lake Counting（搜索联通块）
Lake Counting Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 48370 Accepted: 23775 Descr ...
- ELK系列四：Logstash的在ELK架构中的使用和简单的输入
1.ELK架构中Logstash的位置: 1.1.小规模集群部署(学习者适用的架构) 简单的只有Logstash.Elasticsearch.Kibana,由Logstash收集日志或者流量信息,过滤 ...
- 2015.7.11js-10(无缝滚动)
1.实现原理:setInterval定时器,让某元素position的left属性定时滚动,使用到js中的元素的offsetLeft属性. 2.案例:1.css的实现是外div是4张图片的总宽度,设置 ...
- 关于virgo-tomcat-server-3.6.0.RELEASE配置文件修改说明
Virgo项目Web服务器是EclipseRT项目的一部分,是一个完全模块化的Java运行时. Virgo自身就是设计为在标准OSGi框架实现(Equinox)之上的一个OSGi bundle集合. ...
- 【CF913G】Power Substring 数论+原根
[CF913G]Power Substring 题意:T组询问,每次给定一个数a,让你求一个k,满足$2^k$的10进制的后$min(100,length(k))$位包含a作为它的子串.你只需要输出一 ...
- Jmeter TCP取样器配置及发送图解
最近在通过Jmeter测试TCP发送请求时,遇到相关问题,现记录 查看管方文档,TCP发送有三种启用方式: TCPClientImpl:文本数据,默认为这种 BinaryTCPClientImpl:传 ...