《JavaScript高级程序设计》读书笔记(四)

花旗杯的团队已经组好了。自己要加快学习进度,保证不拖组织的后腿。全力以赴,尽善尽美,希望最后能够有好的成绩。

这篇博文总结了《JavaScript高级程序设计》的13~14章:事件,表单脚本。

事件

事件流

1.事件流描述从页面接收事件的顺序。IE提出事件冒泡流,Netscape提出事件捕获流。

2.事件冒泡:事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。

3.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。由于老版本浏览器不支持,不推荐使用。

4.“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。

事件处理程序

5.HTML事件处理程序:扩展作用域,在函数内部可以像访问局部变量一样访问document及该元素本身的成员。

1
<input type="button" value="Click Me" onclick="console.log(value)">

如果是一个表单输入元素,则作用域中还会包含访问表单元素的入口。

1
2
3
4
<form method="post">
<input type="text" name="username" value="">
<input type="button" value="Echo username" onclick="console.log(username.value)">
</form>

缺点:(1)存在时差问题,函数被解析之前就触发事件会引发错误;(2)扩展处理程序的作用域链在不同浏览器中会导致不同结果;(3)HTML和JavaScript代码紧密耦合。

6.DOM0级事件处理程序:每个元素都有自己的事件处理程序属性,将其设置为一个函数,就可以指定事件处理程序。

1
2
3
4
5
6
7
8
// 绑定事件处理程序
var btn = document.getElementById("myBtn");
btn.onclick = function(){
console.log(this.id); // "myBtn"
};
// 删除事件处理程序
btn.onclick = null;

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

7.DOM2级事件处理程序:addEventListener()removeEventListener(),接受3个参数:要处理的事件名、事件处理程序函数和一个布尔值(true表示在捕获阶段调用事件处理程序,默认为false表示冒泡阶段调用)。

移除时传入的参数与添加处理程序时使用的参数相同,意味着通过addEventListener()添加的匿名函数无法移除。

1
2
3
byn.addEventListener("click", handler, false);
...
btn.removeEventListener("click", handler, false); // 有效

8.IE事件处理程序:attachEvent()detachEvent(),接收两个参数:要处理的事件名、事件处理程序函数。事件处理程序被添加到冒泡阶段,在全局作用域中运行(this 等于 window)。支持IE事件处理程序的浏览器有 IE 和 Opera。

事件对象

9.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象包含着所有与事件有关的信息。只有在事件处理程序执行期间,event 对象才会存在;一旦事件处理程序执行完成,event 对象就会被销毁。

10.属性/方法:

  • currentTarget:正在处理事件的那个元素。
  • target:事件的目标。
  • type:事件类型。
  • cancelable:可以阻止特定事件的默认行为。
  • preventDefault():阻止特定事件的默认行为。
  • stopPropagation():停止事件在DOM层次中的传播,即取消进一步的事件捕获或冒泡。
  • eventPhase:调用事件处理程序的阶段:捕获阶段为1,处于目标对象为2,冒泡阶段为3。

事件类型

11.“DOM3级事件”规定了以下几类事件:

  • UI(用户界面)事件,当用户与页面上的元素交互时触发:loadunloadresizescroll
  • 焦点事件,当元素获得或失去焦点时触发。
  • 鼠标与滚轮事件:clickdblclickmousedownmouseentermouseleavemouseoutmouseovermouseup
  • 键盘与文本事件:keydownkeypresskeyuptextInput
  • 复合事件,用于处理IME(输入法编辑器,让用户输入在物理键盘上找不到的字符)的输入序列。
  • 变动事件,当DOM中的某一部分发生变化时给出提示。

内存和性能

to be continued..

表单脚本

to be continued..