标签：
第13章 事件
JavaScipt与HTML之间的交互是通过事件实现的。事件是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预订事件。
事件流
事件流描述的是从页面中接收事件的顺序。IE的事件流是冒泡流。Netscape的事件流是事件捕获流。
（一）事件冒泡：
事件开始时由最具体的元素接收，然后逐级向上传到较为不具体的元素
（二）事件捕获
不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
由于老版本的浏览器不支持，因此很少有人使用事件捕获。
（三）DOM事件流
"DOM2级事件"规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
事件处理程序
事件：用户或浏览器自身执行的某种动作 click、load、mouseover
事件处理程序（或事件侦听器）：响应某个事件的函数 onclick、onload、onmouseover
（一）HTML事件处理程序
（1）包含具体动作
<input type="button" value="Click Me" onclick="alert(‘Clicked‘)"/>
这个操作时通过指定onclick特性并将一些JavaScript特性并将一些JavaScript代码作为它的值来定义的。由与这个值是JavaScript，因此不能在其中使用未经转义的HTML语法字符
（2）调用在页面其他地方定义的脚本
<input type="button" value="Click Me" onclick="showMessage() "/>
<script type="text/javascript">
function showMessage() {
alert("Hello world!")
}
</script>
（3）缺点
1）时差问题
2）这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果
3）HTML和Javascript代码紧密耦合。如果更换事件处理程序，就要改动两个地方
（二）、DOM0级事件处理程序
将一个函数复制给一个事件处理程序属性。每个元素都有自己的时间处理程序属性，这些属性通常会小写，例如：onclick。将这种属性的值设置为一个函数，就可以这样指定事件处理程序。
var btn = document.getElementById("myBtn");
btn.onclick= function() {
alert("Clicked");
};
通过DOM0级方法指定时间处理程序被认为是元素的方法。程序中的this引用当前元素。可以在时间处理程序中通过this访问元素的任何属性和方法。这种方式添加事件处理程序会在事件流的冒泡阶段被处理
var btn = document.getElementById("myBtn");
btn.onclick= function() {
alert("this.id");
};
删除DOM0级方法指定的时间处理程序：
btn.onclick=null;
（三）、DOM2级事件处理程序
（1）处理指定时间处理程序的操作
方法：addEventListener()
参数：要处理的事件名、作为事件处理程序的函数、布尔值
布尔值：
true 表示捕获阶段调用事件处理程序
false 表示冒泡阶段调用事件处理程序
事件处理程序作用域：所属元素
多个时间执行顺序：按添加顺序
例子：
var btn = document.getElementById("myBtn");
btn. addEventListener("click", function(){
alett(this.id);
},fasse)
btn. addEventListener("click", function(){
alett("hello");
},fasse)
注意：
1）添加的时间处理程序也是在其依附的元素的作用域中执行，因此，this指代这个元素
2）可以添加多个时间处理程序
3）两个事件处理程序会按照添加它们的顺序除法
（2）删除时间处理程序的操作
方法：removeEventListener()
参数：要处理的事件名、作为事件处理程序的函数、布尔值
布尔值：
true 表示捕获阶段调用事件处理程序
false 表示冒泡阶段调用事件处理程序
注意：移除时传入的参数与添加处理程序时使用的参数相同。因此匿名函数无法删除
事件处理程序作用域：所属元素
例子：
var btn = document.getElementById("myBtn");
var handler= function() {
alert(this.id);
};
btn addEventListener("click",handler,false);
btn removeEventListener("click",handler,false);
（四）IE时间处理程序
（1）:添加一个时间处理程序
方法：attachEvent()
参数：事件处理程序名称(onclick而非click)、时间处理程序函数
事件处理程序作用域：全局作用域。因此this=window
多个时间执行顺序：相反的顺序被触发
例子：
var btn = document.getElementById("myBtn");
btn. addachEvent("onclick", function(){
alett("Clicked");
});
btn. addEventListener("onclick", function(){
alett("hello");
});
（2）：移除一个时间处理程序
方法：detachEvent()
参数：事件处理程序名称(onclick而非click)、时间处理程序函数
事件处理程序作用域：全局作用域。因此this=window
注意：移除时传入的参数与添加处理程序时使用的参数相同。因此匿名函数无法删除
例子：
var btn = document.getElementById("myBtn");
btn. addachEvent("onclick", function(){
alett("Clicked");
});
btn. detachEvent("onclick", function(){
alett("Clicked");
});
(五)、跨浏览器的事件处理程序
（一）addHandler()
定义：视情况分别使用DOM0级方法、DOM2级方法、或IE方法添加事件
参数：要操作的元素、事件名称和事件处理程序函数
（二) removeHandler()
定义：移除之前添加的事件处理程序
例子：
EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);
事件对象
在触发DOM上的某个事件时，会产生一个事件对象，这个事件中包含着所有与事件有关的信息。包括事件的元素、事件的类型、以及其它与事件有关的信息
（一）Dom中的事件对象
兼容DOM的浏览器会将一个 event对象传入到事件处理程序中（函数）中。
1、event对象
1）通过HTML特性指定时间处理程序，变量event中保存着event对象
<input type="button" value="Click Me" onclick="alert(event.type) "/>
2）DOM0级和DOM1级
var btn = document.getElementById("myBtn");
btn.onclick= function(event) {
alert("event.type");
};
btn. addEventListener("click", function(event){
alett("event.type");
} ,fasse)
2、
event对象的属性和方法：
属性：
bubbles 表明时间是否冒泡
cancelable 表明是否可以取消事件的默认行为
currentTarget 时间处理程序当前正在处理事件的那个元素
detail 与事件相关的细节嘻嘻
eventPhase 调用事件处理程序的阶段 ： 1表示捕获阶段 2表示处于目标 3表示冒泡阶段
target 事件的目标
type 被触发时间的类型
preventDefault() 取消事件的默认行为
stopPropagation() 取消事件的进一步捕获或冒泡
3、this、currentTarget、target属性指代的值
1）如果直接将时间处理程序制定给了目标元素，则this、currentTarget和target包含相同的值
2）如果时间处理程序存在于按钮的父节点中，那么这些值是不同的
event.currentTarget === document.body
this === document.body
event.target ===document.getElementById("MyBtn")
（二）IE中的事件对象
1、event对象
1）通过HTML特性指定时间处理程序，那么可以通过一个名叫event的变量来访问event对象
<input type="button" value="Click Me" onclick="alert(event.type) "/>
2）DOM0级
event对象作为window对象的一个属性存在
var btn = document.getElementById("myBtn");
btn.onclick= function() {
var event = window.event;
alert(event.type)
};
3）IE方法
var btn = document.getElementById("myBtn");
btn. addachEvent("onclick", function(event){
alert("event.type");
});
2、IE中event对象的属性和方法
cancelBubble 可以取消冒泡事件
returnValue 取消事件默认行为
srcElement 时间的目标
type 被触发时间的类型
3、this指代事件
由于事件处理程序的作用域是根据指定它的方式来确定的，所以不能认为this会始终等于时间目标。所以，使用event.srcElement比较保险
（三）跨浏览器的事件对象
p360具体实现方法
事件类型
一、UI事件
（1）load 当页面完全加载时触发
（2）unload 在文档被完全卸载后触发。只要用户从一个页面切换到另一个页面，就会unload事件
（3）abort 当垂直滚动位置发生变化时
（4）error
（5）select
（6）resize 当浏览器窗口被调整到一个新的高度或者高度，就会发生resize事件
（7）scroll
二、焦点事件
（1）blur 在元素失去焦点时触发
（2）DOMFocusIN 在元素获得焦点时触发 （Opera）
（3）DOMFocusOut 在元素失去焦点时触发 （Opera）
（4）focus 在元素获得焦点时触发
（5）focusin: 在元素获得焦点时触发 （IE）
（6）focesout: 在元素失去焦点时触发 （IE）
三、鼠标事件
（1）click
（2）dbclick
（3）mousedown
（4）mouseenter
（5）mouseleave
（6）mousemove
（7）mouseout
（8）mouseover
（9）mouseup
属性：
（1）页面坐标位置
pageX和pageY
（2）屏幕坐标位置
clientX和clientY
（3）修改键的状态
Shift、ctrlKey 、
四、滚轮事件
mousewheel
五、键盘与文本事件
keydown: 当用户按下键盘下的任意键时触发
keypress 当用户按下键盘上的字符键时触发
keyup: 当用户释放键盘上的键时触发
textInput: 插入文本框的事件
七、合成时间
八、变动事件
在DOM结构中发生变化时触发
九、HTML5事件
十、设备事件
只能手机和平板电脑的普及，为用户与浏览器交互引入一种新的方式
（1）orientationchange事件
Safari中添加的事件，以便开发人员能够确定用户何时将设备由横向查看模式切换为纵向查看模式
（2）MozOrientation事件
当设备的加速计检测到设备方向改变时，就会触发这个事件
十一、触摸与手势事件
1、触摸事件
（1）touchstart 当手指触摸屏幕时触发
（2）touchmove 当手指在屏幕时触发
（3）touchend 当手指在屏幕上滑动时触发
（4）touchcancel 当系统停止跟踪触摸时触发
（5）touches 当前跟踪的触摸操作的Touch对象数组
（6）targetTouchs: 特定于事件目标的Touch对象数组
（7）changeTouches: 表示自上次触摸以来发生了什么改变的Touch对象的数组
2、手势事件
（1）gesturestart 当一个手指已经按在屏幕上而另一个手指又触发屏幕时触发
（2）gesturechange 当触摸屏幕的任何一个手指的位置发生变化时触发
（3）gestureend 当任何一个手指从屏幕上面移开时触发
内存和性能
每个函数都是对象，都会占用内存；内存中的对象越多，性能越差。其次，必须实现指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪事件
1、事件委托
只需要在DOM树中尽量最高的层次上添加一个时间处理程序，利用冒泡，就可以解决一类事情
2、移除事件处理程序
在页面卸载之前，先通过onunload事件处理程序移除所有事件处理程序
模拟事件
1、DOM中的事件模拟
2、IE中的事件模拟
第14章 表单脚本
表单的基础知识
1、取得<form>元素的引用方式
1）var form = document.getElementById("form1");
2）document.forms取得页面中所有的表单
var firstForm = document.forms[0];
2、提交表单
1）通用提交按钮
<input type = "submit" value="Submit Form">
2）自定义提交按钮
<button type = "submit"> Submit Form</button>
3）图像按钮
<input type = "image" src = "graphic.gif">
3、重置表单
1）通用重置按钮
<input type= "reset" value="Reset Form">
2）自定义重置按钮
<button type = "reset">Reset Form</button>
4、表单字段
每个表单都有elements属性，该属性是表单中所有表单元素（字段）的集合。这个elements集合是一个有序列表，其中包含着表单所有字段。
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为“textbox1”的字段
var field2= form.elements["textbox1"];
5、文本框
（1）文本框脚本
1）<input type="text" size="25" maxlength="50" value="initial value">
2）<textarea rows="25" cols="5">initial value</textarea>
（2）方法
select():选择文本框
textbox.select();
（3）事件
select事件
（4）取得选择文本
属性：
secectionStart和selectionEnd
方法：
setSelectionRange()
textbox.setSelectionRange(0,3);
（5）特殊操作
1）过滤输入
2）操作剪贴板
6、选择框
1）结构
<select>
<option></option>
<option></option>
</select>
2）操作
添加选项
移除选项
移动和重排选项
表单共同部分
1、共有的表单字段属性
disabled: 表示当前字段是否被禁用
form: 指向当前字段所属表单的指针
name: 当前字段的名称
readOnly: 表示当前字段是否只读
tabIndex: 表示当前字段的切换(tab)序号
type: 表示当前字段的类型
value: 当前字段被提交给服务器的值
2、共有表单字段方法
（1）focus() 用于将浏览器的焦点设置到表单字段
（2）blur() 从焦点中移走
3、共有的表单字段事件
blur:当前字段失去焦点时触发
change:对于<input>和<textarea>元素，在它们失去焦点且<value>值发生改变时触发
focus:当前字段获得焦点时触发
富文本操作
富文本编辑功能是通过一个包含空HTML文档的iframe元素来实现的。通过将空文档的desinMode设置为"on",就可以将该页面转换为可编辑状态。此时其表现如同字处理软件。另外，也看可以将某个元素设置为contenteditable.在默认情况下，可以将字体加粗或者将文本切换为斜体，还可以使用剪贴板。JavaScript通过使用execCommand()方法也可以实现相同的一些功能。另外，使用quetyCommandEnabled()、quetyCommandState()和queryCommandValue()方法则可以取得有关文本选区的信号。
第17章 错误处理与调试
错误处理
try{
//可能会导致错误的代码
} catch{
//在错误发生时应该怎么处理
}finally {
}
我们把所有会抛出错误的代码都放在try语句块中，而把那些用于错误处理的代码放在catch块中，finally中的代码无论如何都会执行
错误处理
Error 基类型
EvalError eval（）函数发生异常时抛出
RangeError 数值超出范围时触发
ReferenceError 找不到对象的情况下触发
SyntaxError 把错误的语法出入eval()函数时
TypeError 变量中保存意外的语法
URIError URI格式不正确
抛出错误
throw语句
在遇到throw操作符时，代码会立即停止执行。仅当有try-catch语句捕获到被抛出的值时，代码才会继续执行。
可以使用每种错误类型的构造函数接收一个参数，即实际的错误消息。
throw new Error( "Something bad happened.");
throw new SyntaxError("I don‘t like your syntax.")
常见的错误类型
由于JavaScript是松散型的，而且也不能验证函数的参数。常出现以下三种错误
（1）类型转换错误
（2）数据类型错误
（3）通信错误
常见的IE错误
（1）操作终止
（2）无效字符
（3）未找到成员
（4）未知运行时错误
（5）语法错误
（6）系统无法找到指定资源
区分致命错误和非致命错误
致命错误：
（1）：应用程序根本无法继续运行；
（2）：错误明显影响了用户的主要操作；
（3）：会导致其他连带错误；
记录错误
（1）把错误消息记录到服务器
function logError(sev,msg) {
var img = new Image();
img.src = "log.php?sev="+encodeURIComponent(sev)+"&msg="+
encodeURIComponent(msg);
}
（2）表消息记录到当前页面
funtion log (message) {
var console = document.getElementById("debuginfo");
........
}
调试错误
（1）error(message): 将错误消息记录到控制台
（2）info(message):将信息性消息记录到控制台
（3）log(message):将一般消息记录到控制台
（4）warn(message)：将警告消息记录到控制台
标签：
原文地址：http://www.cnblogs.com/nankeyimeng/p/5107902.html
