JS笔记：第13、14章 事件和表单脚本

第13章 事件

JavaScript与HTML之间的交互是通过事件实现的。

事件流：

事件流描述的是从页面中接收事件的顺序。但有意思的是IE和Netscape开发团队居然提出了差不多完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。

（1）事件冒泡

IE的事件流叫事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

（2）事件捕获

Netscape团队提出的另一种事件流叫做事件捕获。事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

（3）DOM事件流

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

事件处理程序：

事件就是用户或浏览器自身执行的某个动作。诸如click、load和mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。为事件指定处理程序的方式有好几种。

（1）HTML事件处理程序

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。

事件处理程序函数中有一个局部变量event，也就是事件对象。

（2）DOM0级事件处理程序

通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这样有两个优势，一个是简单，一个是具有跨浏览器的优势。要使用JavaScript指定事件处理程序，首先必须取得一个要操作对象的引用。

每个元素（包括window和document）都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick。

Var btn = document.getElementById(“mybtn”);

btn.onclick = function(){};

使用DOM0级方法指定的事件处理程序被认为是元素的方法。换句话说，程序中的this引用当前元素。会在事件流的冒泡阶段被处理。

（3）DOM2级事件处理程序

“DOM2级事件“定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，都接收3个参数：要处理的事件名、事件处理程序函数、一个布尔值。最后这个布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

Var btn = document.getElementById(“mybtn”);

btn.addEventListener(“click”,function(){},false);

通过addEventListener添加的事件处理程序只能使用removeEventListener()来移除，移除时得传入相同的参数，这意味着添加的匿名函数将无法被移除。

（4）IE事件处理程序

IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。

Var btn = document.getElementById(“mybtn”);

btn.attachEvent(“onclick”,function(){});

在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域。使用attachEvent()方法的作用域为全局。

（5）跨浏览器的事件处理程序

使用能力检测来进行判断使用哪种处理程序；

事件对象：

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

（1）DOM中的事件对象

event.type可以为click、mouseover、mouseout等；

要阻止特定事件的默认行为，可以使用preventDefault()方法。例如，链接的默认行为就是在被单击时会导航到其href特性指定的URL。如果你想阻止链接导航这一默认行为，那么通过链接的onclick事件处理程序可以取消它。

link.onclick = function(event){event.preventDefault();};

只有cancelable属性值设置为true的事件，才可以使用preventDefault()来取消其默认行为。

另外，stopPropagation()方法用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。

（2）IE中的事件对象

与访问DOM中的event对象不同，要访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。

在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。

在使用attachEvent()添加时，event对象作为参数被传入事件处理程序函数中。

（3）跨浏览器的事件对象

事件类型：

DOM3级事件规定了以下几类事件：

UI事件：当用户与页面上的元素交互时触发；

焦点事件：当元素获得或失去焦点时触发；

鼠标事件：当用户通过鼠标在页面上执行操作时触发；

滚轮事件&