Javascript高级程序设计(笔记)–13章

事件

使用侦听器（或处理程序）来预订事件， 以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型

DOM2级事件

1.ie8及以前除外所有浏览器均已支持

2.dom2事件并没有包含所有事件类型+Bom事件===》dom3级事件事件增强

事件流

1.事件流描述的是从页面中接收事件的顺序

2.IE 的事件流是事件冒泡流，而 Netscape Communicator 的事件流是事件捕获流

事件冒泡

定义： 即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点 接收，然后逐级向上传播到较为不具体的节点（文档）–由内到外

浏览器支持：所有现代浏览器都支持事件冒泡

浏览器差异： IE5.5 及更早版本中的事件冒泡 会跳过元素，从body直接跳到document

IE9、Firefox、Chrome 和 Safari 则将事件一直冒泡到 window 对象

事件捕获

定义： 事件捕获的思想是不太具体的节点应该更早接收到事件而最具体的节点应该最后接收到事件–由外到内

DOM事件流

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

注意：1.DOM2级事件要求事件捕获阶段从document->body ，下一阶段为“处于目标”阶段，当事件发生后再处理事件中被看成是冒泡阶段的一部分，然后冒泡阶段发生

2.但 IE9、Safari、Chrome、Firefox 和 Opera 9.5 及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两个机会在目标对象上面操作事件

事件处理程序

事件：点击事件，load,mouse事件，用户或浏览器自身执行的某种动作

事件处理程序:响应某个事件的函数–名字以 “on” 开头(onclick,onload)

关联：为事件指定事件处理 程序

事件处理程序（事件侦听器）

事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码

event:局部变量 event事件对象

this:值等于事件目标元素

其作用域的扩展

function(){
  with(document){
    with(this){
     //元素属性值
  }
}

<form method="post">
<input type="text" name="username" value="">
<input type="button" value="Echo Username" onclick="alert(username.value)">
</form> //单击按钮显示userName

with:的使用请参考——https://www.jb51.net/article/12326.htm

假设 showMessage() 函数是在按钮下方、页面的最底部定义的。如果用户在页面解析 showMessage()函数之前就单击了按钮，就会引发错误。为此，很多 HTML 事件处理程序都会被封装在一个 try-catch 块中，以便错误不会浮出水面

<input type="button" value="Click Me" onclick="try{showMessage();}catch(ex){}">

DOM0 级事件处理程序

要使用 JavaScript 指定事件处理程序

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

注意

• 这些代码运行时才会指定事件处理程序–所以如果按钮先显示，有可能在一定时间内点击无响应
• DOM0 级方法指定的事件处理程序被认为是元素的方法，这时候的事件处理程序是在 元素的作用域中运行（程序中的 this 引用当前元素）
• 以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理

DOM2 级事件处理程序

addEventListener()和 removeEventListener()

注意

• 第三个参数，Boolean：true(处于捕获阶段触发)，false(默认，处于冒泡阶段触发)
• 可以添加多个事件处理程序（两个click事件都可以执行）
• 只能使用 removeEventListener() 来移除，且参数要相同
• 兼容：ie9+

推荐使用冒泡阶段，捕获阶段只推荐在需要事件到达目标之前截获它的时候使用

IE事件处理程序

attachEvent() 和 detachEvent()

注意

• ie8以下使用
• 由于 IE8 及更早版本只支持事件冒泡所以事件只会被添加到冒泡阶段
• 与上不同的是第一个参数为：onClick(上为click)
• 作用域与上不同：全局作用域中运行（this===window）
• 可以添加多个事件处理程序（两个click事件都可以执行但执行顺序相反）
• 兼容ie&opera

事件对象

：在触发 DOM 上的某个事件时，会产生一个事件对象 even-包含着所有与事件有关的
信息

包括的信息有

• 导致事件的元素
• 事件的类型以及其他与特定事件相关的信息（1.鼠标事件中：鼠标位置的信息..2.键盘事件中：包含与按下的键有关的信息）
• 只有在处理程序执行时event对象才存在，执行完成即被销毁

DOM中的事件对象

var btn = document.var btn = document.getElementB

注意

事件处理程序中的this,currentTarget,target的关系

• 如果事件直接绑定到目标元素则三者值相同
• 如果事件绑定到父节点（如document.body）值各不相同：this == event.currentTarget == document.body; event.target === 当前点击元素

IE中的事件对象

btn.onclick = function(){
var event = window.event;
alert(event.type); //"click"
} 

在IE中Dom0级事件绑定中event 对象作为 window 对象的一个属性存在

事件类型（DOM3）

• UI事件：用户与页面的元素交互时触发
• 焦点事件：当元素获得或失去焦点时触发
• 鼠标事件：当用户通过鼠标在页面上执行操作时触发
• 滚轮事件：当使用鼠标滚轮（或类似设备）时触发
• 文本时间：当在文档中输入文本时触发
• 键盘事件：用户通过键盘在页面上执行操作时触发
• 合成时间：当为 IME（Input Method Editor，输入法编辑器）输入字符时触发
• 变动（mutation）事件：当底层 DOM 结构发生变化时触发
• 变动名称事件：当元素或属性名变动时触发。此类事件已经被废弃,没有浏览器实现他们
• 还有一些非通用的由浏览器定制的专有事件

UI事件

var isSupported = document.implementation.hasFeature("HTMLEvents", "2.0");//（前提此浏览器根据标准DOM2事件来实现这些事件则返回true）
var isSupported = document.implementation.hasFeature("UIEvent", "3.0");//同上

var isSupported = document.implementation.hasFeature("FocusEvent", "3.0");//支持DOM3事件