2018.9.6 星期四
第10章 事件
一、事件流
描述的是从页面接收事件的顺序。
1.事件冒泡（IE事件流）
事件开始有罪具体的元素接收，然后逐级向上传播到不具体的节点。
<html>
<head>
<body>
<div>click me</div>
</body>
</head>
</html>
当点击了<div>元素，这个click事件会按照如下顺序执行：
div-->body-->html-->document
注意：IE8以及更早版本只支持事件冒泡。
2.事件捕获（Netscape事件流）
不太具体的节点更早接收事件，具体的节点到最后接收事件。
当点击了
document–>html–>body–>div
3.DOM事件流
“DOM2级事件”归档了事件流包括三个阶段：事件捕获阶段，处理目标阶段和事件冒泡阶段。
首先发生的是事件捕获，为截取事件提供了机会，然后是实际的目标接收到事件，最后是事件冒泡。
事件捕获：document-->html-->body
处理目标：事件处理
事件冒泡：div-->body-->html-->document
二、事件处理程序：
响应某个事件的函数为事件处理程序，事件处理程序以”on”开头，如onclick,onload。
1.HTML事件处理程序
某个元素支持的美中事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。
这个值应该是可执行的javascript代码。
<input type = "button" value = "clickMe" onclick = "alert("is clicked")">
<input type = "button" value = "clickMe" onclick = "showMsg()">
<script type = "text/javascript">
function showMsg(){
alert("is clicked");
}
</script>
点击按钮会调用showMsg()函数，事件处理程序的代码在执行时，有权访问全局作用域的任何代码。
缺点：时间差问题。
这种扩展事件处理程序的作用域链在不同浏览器中会导致不同的结果。
HTML与JavaScript代码紧密耦合。
2.DOM0级事件处理程序
通过javascript制定事件处理程序的传统方式，将一个函数赋值给一个事件处理程序属性。特点是简单，跨浏览器。
var btn = document.getElementById('btn');
btn.onclick = function(){
alert('clicked');
}
DOM0级方法制定的事件处理程序被认为是元素的方法，
因此这个时候事件处理程序是在元素的作用于中运行，
this指向当前元素。
btn.onclick = null;//删除事件处理程序
3.DOM2级事件处理程序
DOM2级规范以一种符合逻辑的方式来标准化DOM事件，
IE9，Firefox，Safari，Chrome全部已经实现了“DOM2级事件”模块的核心部分。
IE8是最后一个仍然使用其专有事件系统地主要浏览器。
4.非IE事件处理程序
addEventListener() //事件绑定
参数：
要绑定的事件名
作为事件处理的函数
布尔值：true在捕获阶段调用事件处理程序
false在冒泡阶段调用
removeEventListener() //事件删除
参数：
要删除的事件名
作为事件处理的函数
布尔值：true在捕获阶段调用事件处理程序
false在冒泡阶段调用
注意：可以添加多个事件处理程序，并且按照添加的顺序触发。
移除事件的参数与添加处理程序时使用的参数相同。
添加事件时如果使用匿名函数将无法删除。
5.IE事件处理程序
事件处理程序会在全局作用域中运行，因此this指向window对象。
为一个对象添加两个相同的事件，事件处理程序的顺序是按照添加的相反顺序进行处理。
attachEvent() //事件绑定
参数：
事件处理程序名称
事件处理函数
detachEvent() //事件移除
参数：
事件处理程序名称
事件处理函数
事件处理程序都被添加到冒泡阶段
三、事件对象
1.DOM中的事件对象
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件相关的信息，
包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。
兼容DOM的浏览器默认会将event对象传入到事件处理函数中。
dom.onclick = function(event){
console.log(event);
}
dom.addEventListener("click",function(event){
console.log(event);
},false);
事件对象的属性均为只读性：
属性 类型 说明
bubbles Boolean 事件是否冒泡
cancelable Boolean 是否可取消事件默认行为
currentTarget Element 事件处理程序当前正在处理事件的那个元素
eventPhase Integer 调用事件处理程序的阶段；1捕获 2处理目标 3冒泡
target Element 事件真正目标
type String 事件类型，需要一个函数处理多个事件时，可使用该属性
preventDefault() Function 取消事件的默认行为
stopPropagation() Function 取消事件的进一步捕获或者冒泡
在事件处理程序内部，对象this始终指向currentTarget值，而target则只包含事件的实际目标。
如果直接将事件处理程序指定给了目标元素，this,currentTarget,target包含相同的值。
2.IE中的事件对象
在使用DOM0级方法添加事件时，event对象可以作为window对象的一个属性存在，
使用attachEvent添加数据处理程序的时候，event对象会作为参数传入事件处理函数中。
dom.onclick = function(){
console.log(window.event);
window.event.returnValue = false;//阻止默认行为
window.event.cancelBubble = true;//取消冒泡
}
dom.attachEvent("onclick",function(event){
console.log(window.event);
});
属性 类型 说明
cancelBubble Boolean 是否取消事件冒泡，值为true取消冒泡，类似stopPropagation()。
returnValue Boolean 取消事件默认行为，值为false阻止，类似preventDefault()。
srcEvent Element 事件目标 target
type String 被触发的事件的类型
四、事件类型
1.UI事件
1) load
当页面完全加载后在window上触发，当所有框架加载完时在框架集上触发，
当图像加载完毕时在img元素上触发，当嵌入的内容加载完时在触发
2) unload
当页面完全卸载后在window上触发，当所有框架都卸载完时在框架集上触发，当嵌入的内容卸载完毕后在<object>触发（Firefox不支持）
3) select
当用户选择文本框(<input>,<textarea>)中的一个或多个字符时
4) resize
当浏览器窗口被调整到一个新的高度或者宽度时，会触发。
5) scroll
当用户滚动带滚动条的元素中的内容时，该元素上触发resize,scoll会在变化期间重复被激发，尽量保持代码简单。
2.焦点事件
1）blur 元素失去焦点的时候触发
2) focus 元素获得焦点的时候触发，不支持冒泡
3) focusin 与focus等价，支持冒泡
4) focusout 与blur等价，支持冒泡
3.鼠标与滚轮事件
1) click
点击主鼠标按钮或者按下回车案件的时候触发。
只有在一个元素上相继发生mousedown,mouseup事件，才会触发click事件。
2) dblclick
双击主鼠标按钮是时触发，只有在一个元素上相继触发两次click事件才会触发dbclick事件。
3) mousedown
任意鼠标按钮按下时触发
4) mouseup
释放鼠标按钮时触发
5) mousemove
鼠标在元素内部移动的时候触发
6) mousewheel
滚轮事件
7) mouseover
鼠标位于元素外部，将其首次移入另一元素边界之内时触发
【支持子元素】
8) mouserenter
鼠标光标从元素外部首次移动到元素范围内激发，不冒泡
【不支持子元素】
9) mouseout
在位于元素上方的鼠标光标移入到另外一个元素中。
【支持子元素】在被选元素上与mouseleave效果相同
10) mouseleave
在位于元素上方的鼠标光标移动到元素范围之外时触发
不冒泡【不支持子元素】
4.相关因素，event特殊属性
1) 客户区坐标位置
cilentX,cilentY事件发生时，鼠标指针在视口中的水平和垂直坐标位置
2) 页面坐标位置
pageX,pageY事件发生时，鼠标指针在页面本身而非视口的坐标，页面没有滚动的时候，pagex和pageY的值与cilentX和cilentY的值相等
3) 屏幕位置
screenX,screenY
4) 修改键
值为boolean类型，用来判断对应的按键是否被按下shiftKey,ctrlKey,altKey,metaKey
5) 鼠标按钮
mousedown,mouseup，该事件的event对象中包含了button属性，表示按下或者释放按钮。
0表示主鼠标按钮
1表示中间的滚动按钮
2表示次鼠标按钮
5.键盘与文本事件
keydown 按下键盘任意键是触发，如果按住不放会重复触发此事件
keypress 按下键盘字符键时触发，如果按住不放会重复触发此事件
keyup 释放键盘上的键时触发
当键盘事件发生时，event对象的keyCode属性中会包含一个代码与键盘上的特定键对应，对数字字母键，keyCode属性的值与ASCII码中对应的小写字母和数字编码相同。