javascript原型prototype
初看原型
prototype 源自法语，软件界的标准翻译为“原型”，代表事物的初始形态，也含有模型和样板的意义。JavaScript 中的prototype概念恰如其分地反映了这个词的内含，我们不能将其理解为C++的prototype 那种预先声明的概念。
JavaScript 的所有function 类型的对象都有一个prototype 属性。这个prototype 属性本身又是一个object 类型的对象，因此我们也可以给这个prototype 对象添加任意的属性和方法。既然prototype 是对象的“原型”，那么由该函数构造出来的对象应该都会具有这个“原型”的特性。事实上，在构造函数的prototype 上定义的所有属性和方法，都是可以通过其构造的对象直接访问和调用的。也可以这么说，prototype 提供了一群同类对象共享属性和方法的机制。
我们先来看看下面的代码：
function Person(name)
{
https://www.360docs.net/doc/2f17391546.html, = name; //设置对象属性，每个对象各自一份属性数据
};
//给Person 函数的prototype 添加SayHello 方法。
Person.prototype.SayHello = function() {
alert("Hello, I'm " + https://www.360docs.net/doc/2f17391546.html,);
}
var BillGates = new Person("Bill Gates"); //创建BillGates 对象
var SteveJobs = new Person("Steve Jobs"); //创建SteveJobs 对象
BillGates.SayHello(); //通过BillGates 对象直接调用到SayHello 方法SteveJobs.SayHello(); //通过SteveJobs 对象直接调用到SayHello 方法
alert(BillGates.SayHello == SteveJobs.SayHello); //因为两个对象是共享
prototype 的SayHello，
所以显示：true
程序运行的结果表明，构造函数的prototype 上定义的方法确实可以通过对象直接调用到，而且代码是共享的。显然，把方法设置
到prototype 的写法显得优雅多了，尽管调用形式没有变，但逻辑上却体现了方法与类的关系，相对前面的写法，更容易理解和组织代码。
那么，对于多层次类型的构造函数情况又如何呢？
我们再来看下面的代码：
function Person(name) //基类构造函数
2 {
3 https://www.360docs.net/doc/2f17391546.html, = name;
4 };
5
6 Person.prototype.SayHello = function() //给基类构造函数的prototype 添加方法
7 {
8 alert("Hello, I'm " + https://www.360docs.net/doc/2f17391546.html,);
9 };
10
11 function Employee(name, salary) //子类构造函数
12 {
13 Person.call(this, name); //调用基类构造函数
14 this.salary = salary;
15 };
16
17 Employee.prototype = new Person(); //建一个基类的对象作为子类原型的原型，
这里很有意思
18
19 Employee.prototype.ShowMeTheMoney = function() //给子类添构造函数的
prototype 添加方法
20 {
21 alert(https://www.360docs.net/doc/2f17391546.html, + " $" + this.salary);
22 };
23
24 var BillGates = new Person("Bill Gates"); //创建基类Person 的BillGates 对象
25 var SteveJobs = new Employee("Steve Jobs", 1234); //创建子类Employee 的SteveJobs 对象
26
27 BillGates.SayHello(); //通过对象直接调用到prototype 的方法
28 SteveJobs.SayHello(); //通过子类对象直接调用基类prototype 的方法，关注！
29 SteveJobs.ShowMeTheMoney(); //通过子类对象直接调用子类prototype 的方法
30
31 alert(BillGates.SayHello == SteveJobs.SayHello); //显示：true，表明prototype
的方法是共享的
这段代码的第17 行，构造了一个基类的对象，并将其设为子类构造函数的prototype，这是很有意思的。这样做的目的就是为了第28 行，通过子类对象也可以直接调用基类prototype 的方法。为什么可以这样呢？原来，在JavaScript 中，prototype 不但能让对象共享自己财富，而且prototype 还有寻根问祖的天性，从而使得先辈们的遗产可以代代相传。当从一个对象那里读取属性或调用方法时，如果该对象自身不存在这样的属性或方法，就会去自己关联的prototype 对象那里寻找；如果prototype 没有，
又会去prototype 自己关联的前辈prototype 那里寻找，直到找到或追溯过程结束为止。在JavaScript 内部，对象的属性和方法追溯机制是通过所谓的prototype 链来实现的。当用new 操作符构造对象时，也会同时将构造函数的prototype 对象指派给新创建的对象，成为该对象内置的原型对象。对象内置的原型对象应该是对外不可见的，尽管有些浏览器(如Firefox)可以让我们访问这个内置原型对象，但并不建议这样做。内置的原型对象本身也是对象，也有自己关联的原型对象，这样就形成了所谓的原型链。在原型链的最末端，就是Object 构造函数prototype 属性指向的那一个原型对象。这个原型对象是所有对象的最老祖先，这个老祖宗实现了诸如toString 等所有对象天生就该具有的方法。其他内置构造函数，如Function, Boolean, String, Date 和RegExp 等的prototype 都是从这个老祖宗传承下来的，但他们各自又定义了自身的属性和方法，从而他们的子孙就表现出各自宗族的那些特征。
这不就是“继承”吗？是的，这就是“继承”，是JavaScript 特有的“原型继承”。
“原型继承”是慈祥而又严厉的。原形对象将自己的属性和方法无私地贡献给孩子们使用，也并不强迫孩子们必须遵从，允许一些顽皮
孩子按自己的兴趣和爱好独立行事。从这点上看，原型对象是一位慈祥的母亲。然而，任何一个孩子虽然可以我行我素，但却不能动原
型对象既有的财产，因为那可能会影响到其他孩子的利益。从这一点上看，原型对象又象一位严厉的父亲。我们来看看下面的代码就可
以理解这个意思了：
function Person(name)
{
https://www.360docs.net/doc/2f17391546.html, = name;
};
https://www.360docs.net/doc/2f17391546.html,pany = "Microsoft"; //原型的属性
Person.prototype.SayHello = function() //原型的方法
{
alert("Hello, I'm " + https://www.360docs.net/doc/2f17391546.html, + " of " + https://www.360docs.net/doc/2f17391546.html,pany);
};
var BillGates = new Person("Bill Gates");
BillGates.SayHello(); //由于继承了原型的东西，规规矩矩输出：Hello, I'm Bill Gates var SteveJobs = new Person("Steve Jobs");
https://www.360docs.net/doc/2f17391546.html,pany = "Apple"; //设置自己的company 属性，掩盖了原型的company 属性
SteveJobs.SayHello = function() //实现了自己的SayHello 方法，掩盖了原型的SayHello 方法
{
alert("Hi, " + https://www.360docs.net/doc/2f17391546.html, + " like " + https://www.360docs.net/doc/2f17391546.html,pany + ", ha ha ha "); };
SteveJobs.SayHello(); //都是自己覆盖的属性和方法，输出：Hi, Steve Jobs like Apple, ha ha ha
BillGates.SayHello(); //SteveJobs 的覆盖没有影响原型对象，BillGates 还是按老样子输出
对象可以掩盖原型对象的那些属性和方法，一个构造函数原型对象也可以掩盖上层构造函数原型对象既有的属性和方法。这种掩盖
其实只是在对象自己身上创建了新的属性和方法，只不过这些属性和方法与原型对象的那些同名而已。JavaScript 就是用这简单的掩盖机制实现了对象的“多态”性，与静态对象语言的虚函数和重载(override)概念不谋而合。
然而，比静态对象语言更神奇的是，我们可以随时给原型对象动态添加新的属性和方法，从而动态地扩展基类的功能特性。这在静态对象语言中是很难想象的。我们来看下面的代码：
function Person(name)
{
https://www.360docs.net/doc/2f17391546.html, = name;
};
Person.prototype.SayHello = function() //建立对象前定义的方法
{
alert("Hello, I'm " + https://www.360docs.net/doc/2f17391546.html,);
};
var BillGates = new Person("Bill Gates"); //建立对象
BillGates.SayHello();
Person.prototype.Retire = function() //建立对象后再动态扩展原型的方法
{
alert("Poor " + https://www.360docs.net/doc/2f17391546.html, + ", bye bye!");
};
BillGates.Retire(); //动态扩展的方法即可被先前建立的对象立即调用
阿弥佗佛，原型继承竟然可以玩出有这样的法术！
原型扩展
想必君的悟性极高，可能你会这样想：如果在JavaScript 内置的那些如Object 和Function 等函数的prototype 上添加些新的方法和属性，是不是就能扩展JavaScript 的功能呢？那么，恭喜你，你得到了！
在AJAX 技术迅猛发展的今天，许多成功的AJAX 项目的JavaScript 运行库都大量扩展了内置函数的prototype 功能。比如微软的https://www.360docs.net/doc/2f17391546.html, AJAX，就给这些内置函数及其prototype 添加了大量的新特性，从而增强了JavaScript 的功能。
我们来看一段摘自MicrosoftAjax.debug.js 中的代码：
String.prototype.trim = function String$trim() {
if (arguments.length !== 0) throw Error.parameterCount();
return this.replace(/^\s+|\s+$/g, '');
}
这段代码就是给内置String 函数的prototype 扩展了一个trim 方法，于是所有的String 类对象都有了trim 方法了。有了这个扩展，今后要去除字符串两段的空白，就不用再分别处理了，因为任何字符串都有了这个扩展功能，只要调用即可，真的很方便。当然，几乎很少有人去给Object 的prototype 添加方法，因为那会影响到所有的对象，除非在你的架构中这种方法的确是所有对象都需要的。
原型模型需要一个构造函数来定义对象的成员，而方法却依附在该构造函数的原型上。大致写法如下：
//定义构造函数
function Person(name)
{
https://www.360docs.net/doc/2f17391546.html, = name; //在构造函数中定义成员
};
//方法定义到构造函数的prototype 上
Person.prototype.SayHello = function()
{
alert("Hello, I'm " + https://www.360docs.net/doc/2f17391546.html,);
};
//子类构造函数
function Employee(name, salary)
{
Person.call(this, name); //调用上层构造函数
this.salary = salary; //扩展的成员
};
//子类构造函数首先需要用上层构造函数来建立prototype 对象，实现继承的概念Employee.prototype = new Person() //只需要其prototype 的方法，此对象的成员没有任何意义！
//子类方法也定义到构造函数之上
Employee.prototype.ShowMeTheMoney = function()
{
alert(https://www.360docs.net/doc/2f17391546.html, + " $" + this.salary);
};
var BillGates = new Person("Bill Gates");
BillGates.SayHello();
var SteveJobs = new Employee("Steve Jobs", 1234);
SteveJobs.SayHello();
SteveJobs.ShowMeTheMoney();
原型类模型虽然不能模拟真正的私有变量，而且也要分两部分来定义类，显得不怎么“优雅”。不过，对象间的方法是共享的，不会遇到垃圾回收问题，而且性能优于“闭包”模型。正所谓“有失必有得”嘛。
在原型模型中，为了实现类继承，必须首先将子类构造函数的prototype 设置为一个父类的对象实例。创建这个父类对象实例的目的就是为了构成原型链，以起到共享上层原型方法作用。但创建这个实例对象时，上层构造函数也会给它设置对象成员，这些对象成员对于继承来说是没有意义的。虽然，我们也没有给构造函数传递参数，但确实创建了若干没有用的成员，尽管其值是undefined，这也是一种浪费啊。
唉！世界上没有完美的事情啊！
原型真谛
正当我们感概万分时，天空中一道红光闪过，祥云中出现了观音菩萨。只见她手持玉净瓶，轻拂翠柳枝，洒下几滴甘露，顿时让JavaScript 又添新的灵气。观音洒下的甘露在JavaScript 的世界里凝结成块，成为了一种称为“语法甘露”的东西。这种语法甘露可以让我们编写的代码看起来更象对象语言。要想知道这“语法甘露”为何物，就请君侧耳细听。
在理解这些语法甘露之前，我们需要重新再回顾一下JavaScript 构造对象的过程。
我们已经知道，用var anObject = new aFunction() 形式创建对象的过程实际上可以分为三步：第一步是建立一个新对象；第二步将该对象内置的原型对象设置为构造函数prototype 引用的那个原型对象；第三步就是将该对象作为this 参数调用构造函数，完成成员设置等初始化工作。对象建立之后，对象上的任何访问和操作都只与对象自身及其原型链上的那串对象有关，与构造函数再扯不上关系了。换句话说，构造函数只是在创建对象时起到介绍原型对象和初始化对象两个作用。
那么，我们能否自己定义一个对象来当作原型，并在这个原型上描述类，然后将这个原型设置给新创建的对象，将其当作对象的类呢？我们又能否将这个原型中的一个方法当作构造函数，去初始化新建的对象呢？例如，我们定义这样一个原型对象：
var Person = //定义一个对象来作为原型类
{
Create: function(name, age) //这个当构造函数
{
https://www.360docs.net/doc/2f17391546.html, = name;
this.age = age;
},
SayHello: function() //定义方法
{
alert("Hello, I'm " + https://www.360docs.net/doc/2f17391546.html,);
},
HowOld: function() //定义方法
{
alert(https://www.360docs.net/doc/2f17391546.html, + " is " + this.age + " years old.");
}
};
这个JSON 形式的写法多么象一个C#的类啊！既有构造函数，又有各种方法。如果可以用某种形式来创建对象，并将对象的内置的原型设置为上面这个“类”对象，不就相当于创建该类的对象了吗？
但遗憾的是，我们几乎不能访问到对象内置的原型属性！尽管有些浏览器可以访问到对象的内置原型，但这样做的话就只能限定了用户必须使用那种浏览器。这也几乎不可行。那么，我们可不可以通过一个函数对象来做媒介，利用该函数对象的prototype 属性来中转这个原型，并用new 操作符传递给新建的对象呢？
其实，象这样的代码就可以实现这一目标：
function anyfunc(){}; //定义一个函数躯壳
anyfunc.prototype = Person; //将原型对象放到中转站prototype
var BillGates = new anyfunc(); //新建对象的内置原型将是我们期望的原型对象
不过，这个anyfunc 函数只是一个躯壳，在使用过这个躯壳之后它就成了多余的东西了，而且这和直接使用构造函数来创建对象也
没啥不同，有点不爽。
可是，如果我们将这些代码写成一个通用函数，而那个函数躯壳也就成了函数内的函数，这个内部函数不就可以在外层函数退出作用
域后自动消亡吗？而且，我们可以将原型对象作为通用函数的参数，让通用函数返回创建的对象。我们需
要的就是下面这个形式：
function New(aClass, aParams) //通用创建函数
{
function new_() //定义临时的中转函数壳
{
aClass.Create.apply(this, aParams); //调用原型中定义的的构造函数，中转构造逻辑及构造参数
};
new_.prototype = aClass; //准备中转原型对象
return new new_(); //返回建立最终建立的对象
};
var Person = //定义的类
{
Create: function(name, age)
{
https://www.360docs.net/doc/2f17391546.html, = name;
this.age = age;
},
SayHello: function()
{
alert("Hello, I'm " + https://www.360docs.net/doc/2f17391546.html,);
},
HowOld: function()
{
alert(https://www.360docs.net/doc/2f17391546.html, + " is " + this.age + " years old.");
}
};
var BillGates = New(Person, ["Bill Gates", 53]); //调用通用函数创建对象，并以数组形式传递构造参数
BillGates.SayHello();
BillGates.HowOld();
alert(BillGates.constructor == Object); //输出：true
这里的通用函数New()就是一个“语法甘露”！这个语法甘露不但中转了原型对象，还中转了构造函数逻辑及构造参数。有趣的是，每次创建完对象退出New 函数作用域时，临时的new_函数对象会被自动释放。由于new_的prototype 属性被设置为新的原型对象，其原来的原型对象和new_之间就已解开了引用链，临时函数及其原来的原型对象都会被正确回收了。上面代码的最后一句证明，新创建的对象的constructor 属性返回的是Object 函数。其实新建的对象自己及其原型里没有constructor 属性，那返回的只是最顶层原型对象的构造函数，即Object。有了New 这个语法甘露，类的定义就很像C#那些静态对象语言的形式了，这样的代码显得多么文静而优雅啊当然，这个代码仅仅展示了“语法甘露”的概念。我们还需要多一些的语法甘露，才能实现用简洁而优雅的代码书写类层次及其继承关系。
好了，我们再来看一个更丰富的示例吧：
//语法甘露：
var object = //定义小写的object 基本类，用于实现最基础的方法等
{
isA: function(aType) //一个判断类与类之间以及对象与类之间关系的基础方法
{
var self = this;
while(self)
{
if (self == aType)
return true;
self = self.Type;
};
return false;
}
};
function Class(aBaseClass, aClassDefine) //创建类的函数，用于声明类及继承关系{
function class_() //创建类的临时函数壳
{
this.Type = aBaseClass; //我们给每一个类约定一个Type 属性，引用其继承
的类
for(var member in aClassDefine)
this[member] = aClassDefine[member]; //复制类的全部定义到当前创建的
类
};
class_.prototype = aBaseClass;
return new class_();
};
function New(aClass, aParams) //创建对象的函数，用于任意类的对象创建
{
function new_() //创建对象的临时函数壳
{
this.Type = aClass; //我们也给每一个对象约定一个Type 属性，据此可以访问
到对象所属的类
if (aClass.Create)
aClass.Create.apply(this, aParams); //我们约定所有类的构造函数都叫
Create，这和DELPHI 比较相似
};
new_.prototype = aClass;
return new new_();
};
//语法甘露的应用效果：
var Person = Class(object, //派生至object 基本类
{
Create: function(name, age)
{
https://www.360docs.net/doc/2f17391546.html, = name;
this.age = age;
},
SayHello: function()
{
alert("Hello, I'm " + https://www.360docs.net/doc/2f17391546.html, + ", " + this.age + " years old.");
}
});
var Employee = Class(Person, //派生至Person 类，是不是和一般对象语言很相似？{
Create: function(name, age, salary)
{
Person.Create.call(this, name, age); //调用基类的构造函数
this.salary = salary;
},
ShowMeTheMoney: function()
{
alert(https://www.360docs.net/doc/2f17391546.html, + " $" + this.salary);
}
});
var BillGates = New(Person, ["Bill Gates", 53]);
var SteveJobs = New(Employee, ["Steve Jobs", 53, 1234]);
BillGates.SayHello();
SteveJobs.SayHello();
SteveJobs.ShowMeTheMoney();
var LittleBill = New(BillGates.Type, ["Little Bill", 6]); //根据BillGate 的类型创建
LittleBill
LittleBill.SayHello();
alert(BillGates.isA(Person)); //true
alert(BillGates.isA(Employee)); //false
alert(SteveJobs.isA(Person)); //true
alert(Person.isA(Employee)); //false
alert(Employee.isA(Person)); //true
“语法甘露”不用太多，只要那么一点点，就能改观整个代码的易读性和流畅性，从而让代码显得更优雅。有了这些语法甘露，JavaScript就很像一般对象语言了，写起代码了感觉也就爽多了！令人高兴的是，受这些甘露滋养的JavaScript 程序效率会更高。因为其原型对象里既没有了毫无用处的那些对象级的成员，
而且还不存在constructor 属性体，少了与构造函数间的牵连，但依旧保持了方法的共享性。这让JavaScript 在追溯原型链和搜索属性及方法时，少费许多工夫啊。我们就把这种形式称为“甘露模型”吧！其实，这种“甘露模型”的原型用法才是符合prototype 概念的本意，才是的JavaScript 原型的真谛！
想必微软那些设计AJAX 架构的工程师看到这个甘露模型时，肯定后悔没有早点把AJAX 部门从美国搬到咱中国的观音庙来，错过了观音菩萨的点化。当然，我们也只能是在代码的示例中，把Bill Gates 当作对象玩玩，真要让他放弃上帝转而皈依我佛肯定是不容易的机缘未到啊！如果哪天你在微软新出的AJAX 类库中看到这种甘露模型，那才是真正的缘分！
Javascript鼠标触发事件大全
Javascript鼠标事件大全 一般事件 事件浏览器支持描述 onClick IE3|N2|O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件onMouseDown IE4|N4|O 鼠标上的按钮被按下了onMouseUp IE4|N4|O 鼠标按下后，松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] 页面相关事件 事件浏览器支持描述 onAbort IE4|N3|O 图片在下载时被用户中断 onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件 onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误 onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成 onMove IE|N4|O 浏览器的窗口被移动时触发的事件onResize IE4|N4|O 当浏览器的窗口大小被改变时触发
JavaScript面向对象简介
JavaScript面向对象简介 JavaScript 的核心是支持面向对象的，同时它也提供了强大灵活的OOP 语言能力。本文从对面向对象编程的介绍开始，带您探索JavaScript 的对象模型，最后描述 JavaScript 当中面向对象编程的一些概念。 复习JavaScript 如果您对JavaScript 的概念（如变量、类型、方法和作用域等）缺乏自信，您可以在重新介绍JavaScript这篇文章里学习这些概念。您也可以查阅这篇JavaScript 1.5 核心指南。 面向对象编程 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。它使用先前建立的范例，包括模块化，多态和封装几种技术。今天，许多流行的编程语言（如Java，JavaScript，C＃，C+ +，Python，PHP，Ruby 和Objective-C）都支持面向对象编程（OOP）。 面向对象编程可以看作是使用一系列对象相互协作的软件设计，相对于传统观念，一个程序只是一些函数的集合，或简单的计算机指令列表。在OOP中，每个对象能够接收邮件，处理数据和发送消息给其他对象。每个对象都可以被看作是一个独立的小机器有不同的作用和责任。 面向对象程序设计的目的是促进更好的编程灵活性和可维护性，并在大型软件工程中广为流行。凭借其十分注重的模块化，面向对象的代码开发更简单，往后维护更容易理解，使其自身能更直接的分析，编码，理解复杂的情况和过程，比非模块化编程方法省事。1
术语 Namespace 命名空间 允许开发人员在一个专用的名称下捆绑所有功能代码的容器。 Class 类 定义对象的特征。 Object 对象 类的一个实例。 Property 属性 对象的特征，比如颜色。 Method 方法 对象的能力，比如行走。 Constructor 构造函数 实例化时调用的函数。 Inheritance 继承 一个类可以继承另一个类的特征。 Encapsulation 封装 类定义了对象的特征，方法只定义了方法如何执行。 Abstraction 抽象 结合复杂的继承，方法，属性，一个对象能够模拟现实的模型。 Polymorphism 多态 多意为‘许多’，态意为‘形态’。不同类可以定义相同的方法或属性。更多关于面向对象编程的描述，请参照维基百科的面向对象编程。 原型编程
javascript键盘事件
主要分四个部分 第一部分：浏览器的按键事件 第二部分：兼容浏览器 第三部分：代码实现和优化 第四部分：总结 第一部分：浏览器的按键事件 用js实现键盘记录，要关注浏览器的三种按键事件类型，即keydown，keypress和keyup，它们分别对应onkeydown、onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件，依次是keydown，keypress，然后是按键释放时候的keyup。 在这3种事件类型中，keydown和keyup比较底层，而keypress比较高级。这里所谓的高级是指，当用户按下shift + 1时，keypress是对这个按键事件进行解析后返回一个可打印的“!”字符，而keydown和keyup只是记录了shift + 1这个事件。[1] 但是keypress只能针对一些可以打印出来的字符有效，而对于功能按键，如F1-F12、Backspace、Enter、Escape、PageUP、PageDown和箭头方向等，就不会产生keypress事件，但是可以产生keydown和keyup事件。然而在FireFox中，功能按键是可以产生keypress 事件的。 传递给keydown、keypress和keyup事件句柄的事件对象有一些通用的属性。如果Alt、Ctrl 或Shift和一个按键一起按下，这通过事件的altKey、ctrlKey和shiftKey属性表示，这些属性在FireFox和IE中是通用的。 第二部分：兼容浏览器 凡是涉及浏览器的js，就都要考虑浏览器兼容的问题。 目前常用的浏览器主要有基于IE和基于Mozilla两大类。Maxthon是基于IE内核的，而FireFox和Opera是基于Mozilla内核的。 2.1 事件的初始化 首先需要了解的是如何初始化该事件，基本语句如下： function keyDown(){} document.onkeydown = keyDown; 当浏览器读到这个语句时，无论按下键盘上的哪个键，都将呼叫KeyDown()函数。 2.2 FireFox和Opera的实现方法 FireFox和Opera等程序实现要比IE麻烦，所以这里先描述一下。 keyDown()函数有一个隐藏的变量--一般的，我们使用字母“e”来表示这个变量。 function keyDown(e) 变量e表示发生击键事件，寻找是哪个键被按下，要使用which这个属性： e.which
javascript 内置函数和对象
实验项目三内置函数和对象 【学时数】 2 （45 分钟× 2=90 分钟） 【实验内容】 1 、JavaScript 内置函数的应用 2 、JavaScript 内置对象的应用 【实验参考】 《网页设计与制作》………………………………………………………… 重庆大学出版社 《网页标题制作技巧与实例》……………………………………………… 清华大学出版社 《javascript 入门与提高》……………………………………………… 清华大学出版社 《javascript 宝典》……………………………………………………… 电子工业出版社 【实验设备】 计算机，投影机 【实验目的与要求】 1 、掌握JavaScript 内置函数的使用方法 2 、掌握JavaScript 常用内置对象的属性和方法 【实验重点】 1 、掌握JavaScript 内置函数的使用方法 2 、掌握JavaScript 常用内置对象的属性和方法 【实验难点】 1 、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。 【实验方式】 1 、项目工程互动式教学法 2 、“讲、学、练”相结合：对于javascript 内置函数和对象相关细节，大量采用演示、讲解和操作等方式。使学生在实验中加深对相关内容的理解并熟练掌握。 【实验设计】 向学生演示多个javascrip 内置函数和对象的程序案例，学生跟着教师一起完成javascript 程序的编写，同时完成教师布置的思考题，教师实施指导。 第一步：演示JavaScript 内置函数的应用，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。（20 分钟左右）第二步：演示JavaScript 常用内置对象的应用，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。（35 分钟左右） 【实验过程】 实验内容一：JavaScript 内置函数的应用
基于对象的JavaScript语言
基于对象的JavaScript语言 一、对象的基本结构 JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。属性是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；方法是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。 二、引用对象的途径 一个对象要真正地被使用，可采用以下几种方式获得： 1、引用JavaScript内部对象；this window 2、由浏览器环境中提供；https://www.360docs.net/doc/2f17391546.html, 3、创建新对象。new 这就是说一个对象在被引用之前，这个对象必须存在，否则引用将毫无意义，而出现错误信息。 三、有关对象操作语句 1、For...in语句 格式如下：For（对象属性名in 已知对象名） 说明：该功能是用于对已知对象的所有属性进行操作的循环控制。它是将一个已知对象的所有属性反复置给一个变量；而不是使用计数器来实现的。它的优点是无需知道对象中属性的个数即可进行操作。 2、with语句 使用该语句的意思是：在该语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。with object{ ...} 所有在with语句后的花括号中的语句，都是在后面object对象的作用域的。 3、this关键字 this是对当前的引用，在JavaScript由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，最后自己已不知道现在引用的那一个对象，为此JavaScript提供了一个用于将对象指定当前对象的语句this。 4、New运算符可以创建一个新的对象 格式：
理解JavaScript中函数的使用
理解JavaScript中函数的使用 函数是进行模块化程序设计的基础，编写复杂的Ajax应用程序，必须对函数有更深入的了解。 JavaScript中的函数不同于其他的语言，每个函数都是作为一个对象被维护和运行的。通过函数对象的性质，可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前，先看一下函数的使用语法： function func1(…){…} var func2=function(…){…}; var func3=function func4(…){…}; var func5=new Function(); 这些都是声明函数的正确语法。它们和其他语言中常见的函数或之前介绍的函数定义方式有着很大的区别。那么在JavaScript中为什么能这么写？它所遵循的语法是什么呢？下面将介绍这些内容。 认识函数对象（Function Object） 可以用function关键字定义一个函数，并为每个函数指定一个函数名，通过函数名来进行调用。在JavaScript解释执行时，函数都是被维护为一个对象，这就是要介绍的函数对象（Function Object）。 函数对象与其他用户所定义的对象有着本质的区别，这一类对象被称之为内部对象，例如日期对象（Date）、数组对象（Array）、字符串对象（String）都属于内部对象。这些内置对象的构造器是由JavaScript本身所定义的：通过执行new Array()这样的语句返回一个对象，JavaScript内部有一套机制来初始化返回的对象，而不是由用户来指定对象的构造方式。 在JavaScript中，函数对象对应的类型是Function，正如数组对象对应的类型是Array，日期对象对应的类型是Date一样，可以通过new Function()来创建一个函数对象，也可以通过function关键字来创建一个对象。为了便于理解，我们比较函数对象的创建和数组对象的创建。先看数组对象：下面两行代码都是创建一个数组对象myArray： var myArray=[]; //等价于 var myArray=new Array();
JavaScript中按键事件的e.keyCode e.which e.charCode
JavaScript中按键事件的e.keyCodee.whiche.charCode 1、浏览器的按键事件 浏览器有3种按键事件——keydown，keypress和keyup，分别对应onkeydown、onkeypress和onkeyup3个事件句柄。 一个典型的按键会产生所有这三种事件，依次是keydown-->keypress-->keyup。[html]view plaincopyprint? 1. 2. 控制台输出： keydown keypress keyup 2、浏览器的兼容性
(1)FireFox、Opera、Chrome 事件对应的函数有一个隐藏的变量e，表示发生事件。 e有一个属性e.which指示哪个键被按下，给出该键的索引值（按键码）。 静态函数String.fromCharCode()可以把索引值（按键码）转化成该键对应的的字符。eg： [html]view plaincopyprint? 1. 2. FireFox、Opera、Chrome中输入：a 输出：按键码：97 字符：a (2)IE IE不需要e变量，window.event表示发生事件。 window.event有一个属性window.event.keyCode指示哪个键被按下，给出该键的索引值（按键码）。 静态函数String.fromCharCode()可以把索引值（按键码）转化成该键对应的的字符。eg： [html]view plaincopyprint?
JavaScript面向对象编程(最终版)
JavaScript面向对象编程 1、引言 JavaScript是一种解释性的，基于对象的脚本语言（an interpreted, object-based scripting language）。JavaScript 基于客户端运行，目前基本上所有的浏览器都支持JavaScript。1995年首次出现时，JavaScript的主要目的还只是处理一些输入的有效性验证，随着互联网的蓬勃发展，JavaScript的应用越来越广泛，特别是近几年AJAX技术（Asynchronous JavaScript and XML）的发展，更使JavaScript的应用达到了一个新的高度。在AJAX技术中，JavaScript是一项关键技术，请求的发送、接收、接收数据后的界面处理都需要使用JavaScript技术，这对JavaScript语言提出了新的需求，本文从JavaScript的基本特点出发，模拟出了面向对象编程的大部分特点，使JavaScript摆脱了以往脚本语言杂乱无章、难以阅读、难以维护的形象，而具有了面向对象特性，极大的方便了JavaScript的开发、维护，提高了软件开发效率。 2、JavaScript的基本特点 JavaScript是解释性的，基于对象的脚本语言。它有下面几个显著特点，这几个特点在后面的面向对象特性模拟中会反复用到，因此这里先详细说明这几个特点。 解释型语言：JavaScript是一种解释性语言，解释性语言相对于编译型语言，编译型语言必须先通过编译才能执行，而解释性语言不需要编 译，直接从上到下解释执行，一边解释一边执行，这就决定了解释性语 言的代码是有先后顺序的，需要执行的代码必须已经解释过。因此， JavaScript需要注意代码的先后顺序。
Javascript自执行匿名函数(function { }) 的原理浅析
Javascript自执行匿名函数(function { }) 的原理浅析 匿名函数就是没有函数名的函数。这篇文章主要介绍了Javascript自执行匿名函数(function { }) 的原理浅析的相关资料,需要的朋友可以参考下 函数是JavaScript中最灵活的一种对象，这里只是讲解其匿名函数的用途。匿名函数指没有指定函数名或指针的函数，自执行匿名函数只是其中一种，下文中称这种函数为：自执行函数 下面是一个最常见的自执行函数： // 传统匿名函数 (function { alert('hello'); }) ; 这段代码的执行效果就是在页面再载入时弹出："hello" 是什么促使它自动执行的？，来看下面的代码 // 在传统写法上去掉小括号，并在前面加上运算符~,!,+,- ~function { alert('hello'); } ;
!function { alert('hello'); } ; +function { alert('hello'); } ; -function { alert('hello'); } ; 这些写法与上文所说的传统方式执行起来并无区别， 我发现，这些写法的共同点是运算符，其实传统方式的小括号也属于运算的一种，出现在：a=b*(c+d)，运算符 + 传递给自生的参数 = 函数自动执行？但有些符号也不支持，比如“=，*，/”号，它自执行的原因还是很神秘，网上也找不到像样的答案 然后我发现了一个神奇的现象，这些运算符可以无限叠加。。。。。。 // function前面是特定符号可以无限叠加... ~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+ -+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+ -~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-
JavaScript事件
我的记录（JavaScript事件）JavaScript 事件冒泡简介及应用实例 一、什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。 二、事件冒泡有什么作用 （1）事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。 【集中处理例子】
提升JavaScript运行速度之函数篇
提升JavaScript运行速度之函数篇 这篇是Nicholas讨论如果防止脚本失控的第二篇，主要讨论了如何重构嵌套循环、递归，以及那些在函数内部同时执行很多子操作的函数。基本的思想和上一节trunk（）那个例子一致，如果几个操作没有特定的执行顺序，而且互相不是依赖关系，我们就可以通过异步调用的方式加以执行，不止可以减少执行的次数，还可以防止脚本失控。本文还介绍了通过memoization技术取代递归的方法。 【原文标题】Speed up your JavaScript,Part2 【原文作者】Nicholas C.Zakas 以下是对原文的翻译： 上周我在《too much happening in a loop》（译文）这篇文章中介绍了JavaScript运行时间过长的第一个原因。相似的情况有时也出现在函数的定义上，函数也可能因为使用不当而过载使用。通常情况是函数内包含了过多的循环（不是在循环中执行了过多的内容），太多的递归，或者只不过是太多不相干但又要一起执行的操作。 太多的循环经常是以嵌套的形式出现，这种代码会一直占用JavaScript引擎直至循环结束。这方面有一个非常着名的例子，就是使用冒泡算法排序。由于JavaScript有内置的sort （）方法，我们没有必要使用这种方式进行排序，但我们可以借助这个算法理解嵌套循环占用资源的症结所在，从而避免类似情况的发生。下面是一个在JavaScript使用冒泡排序法的典型例子： function bubbleSort（items）{ for（var i=items.length-1;i>=0;i--）{ for（var j=i;j>=0;j--）{ if（items[j] Company name WEB 前端开发技术 HTML JavaScript CSS WEB 前端开发技术 第11章JavaScript 事件分析 计算机科学与技术系 Web前端开发技术主要内容 计算机科学与技术系 ?掌握事件、事件类型的概念 ?掌握事件处理的机制 ?掌握事件名称与句柄的关系 ?学会编写各类的事件响应程序 计算机科学与技术系 Web前端开发技术11.1 事件编程 事件编程:让用户不仅能够浏览页面中的内容，而且还可以和页面元素进行交互。 事件-事件是可以被JavaScript侦测到的行为(ACTION)。 事件源Window Form Mouse key 事件 单击事件 双击事件 事件句柄 Onclick ondblclick 编写事件 处理代码 Web 前端开发技术事件驱动案例导入 计算机科学与技术系 11讲_JavaScript事件分析
计算机科学与技术系 Web 前端开发技术 11.1 事件编程（续） 1.网页访问中常见的事件 鼠标单击：例如单击button 、选中checkbo x 和radio 等元素；鼠标进入、悬浮或退出页面的某个热点：例如鼠标停在一个图片上方或者进入table 的范围； 键盘按键：当按下按键或释放按键时；页面或图像载入：例如页面body 被加载时；在表单中选取输入框或改变输入框中文本的内容：例如选中或修改了文本框中的内容；确认表单：例如当准备提交表单的内容。 事件类型：1.鼠标事件2.键盘事件3.浏览器事件