事件 ( 13 章 )

JavaScript与HTML之间的交互是通过事件实现的。可以使用监听器( 或处理程序 ) 来预订事件，以便事件放生时执行相应的代码。观察员模型.

事件流

事件冒泡 : 有内向外的顺序扩散( 沿着DOM树依次向上 )

事件捕获 ( 很少有人使用 )

沿着DOM树依次向下

1）document

2）html

3）body

4）div

在事件捕获过程中，ducument对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，即 div 元素

由于老版本的浏览器不支持, 因此很少有人使用事件捕获, 我们也建议读者放心的使用事件冒泡.

“DOM2级事件” 规定的事件流包括三个阶段， 事件捕获阶段，处于目标阶段，事件冒泡阶段

事件捕获阶段：为截获事件提供了机会

处于目标阶段：实际的目标接收到事件

事件冒泡阶段：对事件作出反应

事件处理程序 ( 事件监听器 )

事件就是用户或浏览器自身执行的某种动作。例如 click , load，mouseover。而响应某个事件的函数就叫做事件处理程序。事件处理程序的名字以”on”开头，所以以上的事件处理程序就是 onclick , onload , onmouseover。

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

<input type="button" value="Click Me" onclick="alert('Clicked')" />

<script type="text/javascript">

   function showMessage() {

     alert("Hello world!");

  }

</script>

<input type="button" value="Click me" onclick="showMessage()" />

当然也可以包含在一个外部文件中, 事件处理程序中的代码在执行时, 有权访问全局作用域的任何代码. 这样, 会创建一个封装着元素属性值的函数, 这个函数中有个局部变量 event, 也就是事件对象, <input type="button" value="Click me" onclick="alert(event.type)" />  (已经测试, 显示的是 "click"), 通过 event 对象可以直接访问事件对象, 你不用自己定义它, 也不用从函数列表中读取, 在这个函数内部, this 值等于事件的目标元素, 例如: <input type="button" value="Click me" onclick="alert(this.value)" /> (已经测试, 显示的是"click me", 所以 this 即元素本身)

2个问题 ( 缺点 )

1.时差问题，有可能存在，用户已经触发事件，例如 click，但是onclick还没有被加载，导致错误。

2.通过HTML指定事件处理程序HTML与JavaScript代码是紧密耦合。如果要更换事件处理程序，就要改动HTML代码和JavaScript代码。

所以，通过JavaScript指定事件处理程序。

JavaScript指定事件处理程序 （ 解决上边 2个 缺点 )

传统方式，就是将一个函数赋值给一个事件处理程序属性。 如上边的例子

首先，要取得一个要操作的对象的引用。每个元素(包括window和document)都有自己的事件处理程序属性，将这个属性值设置为一个函数，就可以指定事件处理程序。

DOM 0级 事件处理程序

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    alert("Click");
};

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理. (目前我们就使用这种)

在此，我们通过文档对象取得了一个按钮的引用，然后为它指定了onclick事件处理程序，但是，注意，在这些代码运行以前不会指定事件处理程序，因此如果这些代码在页面中位于按钮后面，就又可能在一段事件内证明单击也没有反应。

btn.onclick = null ;     //删除事件处理程序

DOM 2级 事件处理程序

addEventListener()，removeEventListener()，所有的节点都包含这两种方法，并且接收3个参数，要处理的事件名，作为事件处理程序的函数和一个布尔值。如果布尔值是 true表示在捕获阶段调用事件处理程序，如果是false,表示在冒泡阶段调用事件处理程序。

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
    alert(this.id);
},false);

removeEventListener(“click”, “与addEventListener相同”,false); 其中的函数必须要与addEventListener相同，所以，使用上面个的匿名函数时不行的。

var btn = document.getElementById("myBtn");
var handler = function(){
    alert(this.id);
};
btn.addEventListener("click",handler,false);

btn.removeEventListener("click",handler,false);

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度的兼容各种浏览器。（ IE9+ , 支持 dom2 )

IE 事件处理程序(只针对 IE 浏览器)

attachEvent 等同于 addEventListener , 接收 2 个参数，事件名，和处理函数，例如 :

var btn = document.getElementById("myBtn");
var handler = function () {
  alert("Clicked");
} ;

btn.attachEvent("onclick" , handler);
detachEvent 等同于 removeEventListener

btn.detachEvent(“onclick”, handler);

事件对象

在触发DOM上的某个事件时，会产生一个事件对象 event，包含所有与事件有关的信息。DOM0和DOM2会将事件传入到事件处理程序中。

var btn = document.getElementById("myBtn");
// dom 0
btn.onclick = function(event){
	alert(event.type)  // "click"
};

// dom2
btn.addEventListener("onclick", function(event){
  alert(event.type)  // "click"
}, false );

 

事件种类

UI: (User Interface, 用户界面)事件, 当用户与页面上的元素交互时触发,

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

鼠标事件: 当用户通过鼠标操作时触发

滚轮事件: 当用户使用鼠标滚轮时触发

文本事件: 当在文档中输入文本时触发

键盘事件: 当用户通过键盘在页面上执行操作时触发

合成事件: 当为 IME(Input Method Editor 输入法编辑器) 输入字符时触发

变动事件(mutation), 当底层DOM结构发生变化时触发

- UI 事件 ( 指的是那些不一定与用户操作有关的事件,  )

• DOMActive : 元素已经被用户操作 (不建议使用)
• load: 当页面完全加载后在 window 上面触发, 当图像加载完毕时在<img>元素上面触发, 等等, 关键要看放置事件的元素的位置.
• unload: 当页面完全被卸载后 window 上触发, 或者当图像卸载完毕时在<img>元素上面触发, 等等, 关键要看放置事件的元素的位置.
• abort: 用户停止下载过程时
• error: 当javascript错误时在 window 上触发, 当无法加载图像时在<img>元素上触发
• select: 当用户选择文本框(<input>或<texterea>) 中的一个活多个字符时触发
• resize: 当窗口大小变化时
• scroll: 当用户滚动滚动条的元素中的内容时.

- 焦点事件

• blur: 在元素失去焦点触发
• focus: 在元素获得焦点时触发

- 鼠标事件

• click : 鼠标单击鼠标左键或按回车键
• dblclick : 双击鼠标按钮
• mousedown : 按下任意鼠标按钮 ( 不能通过键盘触发这个事件 )
• mouseout : 在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。( 内 –> 外 )
• mouseover：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。( 外 –> 内 ) 
• mouseup : 在用户释放鼠标按钮时触发. ( 不能通过键盘触发这个事件 )
• movesemove : 当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。

触发顺序 :

(mousedown, mouseup, click, dblclick 事件触发顺序 mousedown->mouseup->click->mousedown->mouseup->click->dblclick)

更多的鼠标事件

"DOM2级事件" 提供很多事件, 例如 altLeft, ctrlLeft,

- 鼠标滚轮事件

mousewhell:

客户区坐标位置

event.clientX 与 event.clientY

页面坐标位置

event.pageX 与 event.pageY

屏幕坐标位置

event.screenX与event.screenY

- 键盘事件

• keydown 按下键盘上的任意键时触发，按住不放，会重复触发此事件。
• keypress 按下键盘上的字符键时触发，按住不放，会重复触发此事件。
• keyup  释放键盘上的键时触发。

- 文本事件

textInput: 在将文本显示给用户之前更容易拦截文本, 在文本插入文本框之前会触发 textInput 事件

键码, 在发生 keydown 和 keyup 事件时, event对象的 keyCode属性会包含一个代码, 例如 keyCode 值为 55 则对应键盘中的 7

- HTML事件 ( 当浏览器窗口发生变化或发生特定的客户端/服务器交互时触发 )

- 变动事件 ( 底层 DOM 结构发生变化时触发 )

removeChild( )

replaceChild( )

appendChild( )

replaceChild( )

insertBefore( )

此外, HTML5 还提供了一些其他事件. 例如手机屏幕的横放与竖放 等等.