js和HTML之间交互是通过事件实现的。事件会有事件流。事件描述的是从页面接受事件的顺序。IE和网景提出了差不多相反的事件流概念。IE提出事件冒泡流。网景提出事件捕获流。
事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较不具体的节点。所有现代浏览器几乎都支持冒泡。
事件捕获：不具体的节点更早的接收事件，最具提的节点最后接收到事件。IE9以上可以支持捕获。
DOM2级规定的事件流包括三个阶段（IE8及更早版本不支持事件流）：
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段。
事件处理程序：
- HTML事件处理程序
- DOM0级事件处理程序
- DOM2级事件处理程序
HTML事件处理程序
<input type='button' id='btn' onclick=clickMe() value='click me'>
function clickMe (){
alert('hi')
} //这种处理程序代码耦合度太高，修改时需要修改两处。存在时差问题，有些事件可能需要HTML元素一出现在页面上就触发，但当时的事件处理程序可能尚不具备条件。
DOM0级事件处理程序：
var btn =document.getElementById('btn')
btn.onclick = function () {//每个事件只支持一个事件处理程序
alert('hi')
}
btn.onclick = null //删除事件处理程序
DOM2级事件处理程序：IE9及以上支持
使用DOM2级事件处理程序的好处是可以为一个元素绑定多个事件处理程序
var btn =document.getElementById('btn')
btn.addEventListener('click',function(){
alert('hi')
},false) //click事件在冒泡阶段触发
IE事件处理程序：IE8及以下只支持事件冒泡
var btn =document.getElementById('btn')
btn.attachEvent('onclick',funtion(){ //第一个参数为onclick，并不是click。
alert('hi') //attachEvent()添加的事件处理程序都会被添加到冒泡阶段
})
在IE中使用attachEvent()与使用DOM0级方法的主要区别：事件处理程序运行的作用域不一样。DOM0级事件处理程序会在其所属元素的作用域下运行，而attachEvent()的事件处理程序会在全局作用域运行。attachEvent()也可以为一个元素添加多个事件处理程序，执行顺序与DOM2级事件处理程序的执行顺序相反。
跨浏览器事件处理程序
var EventUtil = {
addEvent:function (element,type,handler) {
if (element.addEventListener) { //ie9及以上
element.addEventListener(type,handler, false)
} else if (element.attachEvent) { //ie8及以下
element.attachEvent('on'+type,handler)
} else {
element['on'+type] = handler
}
},
removeEvent:function(element, type,handler) {
if (element.removeEventListener) {//ie9及以上
element.removeEventListener(type,handler, false)
} else if (element.detachEvent) { //ie8及以下
element.detachEvent('on'+type,handler)
} else {
element['on'+type] = null
}
}
}
<input type='button' id='btn' value='click me'>
var btn =document.getElementById('btn')
var handler = function () {
alert('hi')
}
EventUtil.addEvent(btn,'click',handler)
EventUtil.removeEvent(btn,'click',handler)
事件对象
在触发DOM上的某个事件时，会产生事件对象event。这个对象包含与这个事件有关的信息。
DOM中的事件对象
兼容DOM的浏览器会将一个event对象传入到事件处理程序中，无论是DOM0级还是DOM2级。
var btn = document.getElementByid('btn')
btn.onclick = function (event) {
alert(event.type) //click
}
btn.addEventListener('click',function (event) {
alert(event.type) //click
}, false)
- cancelable 表示是否可以取消事件的默认行为
- preventDefault() 阻止默认操作 cancelable属性需要设置为true
- bubbles 表示事件是否冒泡
- stopPropagation() 取消事件的捕获或冒泡。如果bubbles为true
- event.target 时间的目标
- event.type 事件类型
- event.currentTarget 正在处理事件的元素
- event.eventPhase 确定事件当前正处于事件流的那个阶段 1表示捕获阶段 2 处于目标对象上 3 冒泡阶段
只有在事件处理程序执行期间，event对象才会存在，一旦事件处理程序执行完成，event对象就会被销毁
IE中的事件对象
要访问IE中的event对象有几种不同的方式，取决于事件处理程序的方法。DOM0级事件处理程序，event对象作为window属性存在。
使用attachEvent()的情况下，可以使用event对象，也可以通过window 对象来访问event对象
- cancelBubble 默认值是false，设置为true可以取消冒泡 与stoppropagation()作用相同
- returnValue 默认是false，设置为true表示取消事件默认行为 与* preventDefault()作用相同
- srcElement 事件的目标 与target属性相同
- type 事件类型
btn.onclick = function () {
alert (window.event.srcElement === this) //true
}
btn.attachEvent('onclick', function (event) {
alert(event.srcElement === this) //false
})
跨浏览器事件对象
var EventUtil = {
addEvent:function (element,type,handler) {
if (element.addEventListener) {
element.addEventListener(type,handler, false)
} else if (element.attachEvent) {
element.attachEvent('on'+type,handler)
} else {
element['on'+type] = handler
}
},
removeEvent:function(element, type,handler) {
if (element.removeEventListener) {
element.removeEventListener(type,handler, false)
} else if (element.detachEvent) {
element.detachEvent('on'+type,handler)
} else {
element['on'+type] = null
}
},
getEvent: function (event) {
return event ? event : window.event
} ,
getTarget: function (event) {
return event.target || event.srcElement
},
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault ()
} else {
event.returnValue = false
}
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation ()
} else {
event.cancelBubble = true
}
}
}
btn.onclick = function (event) {
event = EventUtil.getEvent (event)
var target = EventUtil.getTarget (event)
EventUtil.preventDefault()
EventUtil.stopPropagation()
}
事件类型
UI事件（用户与页面上的元素交互时触发）/ 焦点事件 ／鼠标事件 ／滚动事件／键盘事件／文本事件／变动事件／合成事件
UI事件指的是那些不一定与用户操作有关的事件。
- load事件 页面完全加载后window上触发
- unload事件 页面完全卸载后window上触发，只要用户从一个页面切换到另一个页面就会触发
- abort事件 用户停止下载过程时，如果嵌入的内容没有加载完<object>上触发
- error事件 当js发生错误时触发 当无法加载图片时在img上触发 当无法加载嵌入的内容时在<object>上触发
- select事件 当用户选中文本框中的一个或多个字符时触发
- resize事件 当窗口或框架的大小变化时在window或框架上触发
- scroll事件 当用户滚动带滚动条的元素中的内容时在该元素上触发
- load事件中：图片img可以实现预加载，新图像元素不一样要等到添加到文档后才开始加载，只要设置了它的src属性就会开始下载。而<script>标签也支持load事件，只不过只有设置了<script>标签的src属性并且添加到文档后，才会开始下载js文件。
焦点事件
blur focus主要的两个事件，可以在捕获阶段侦听到它们但是它们不支持冒泡。focusin和focusout与blur focus等价，但是支持冒泡。
鼠标事件
- click:用户单击主鼠标或者按下回车键时触发。
- dblclick:用户双击主鼠标时出大。属于DOM3级事件标准
- mouseover:当鼠标指针位于一个元素外部，用户将其首次移入另一个元素边界访问时触发，不能通过键盘触发这个事件
- mouseout:当鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。不能通过键盘触发这个事件
- mousedown：用户按下任意鼠标按钮时触发，不能通过键盘触发这个事件
- mouseup:当用户释放鼠标按钮时触发，不能通过键盘触发这个事件
- mousemove:当鼠标在元素内部移动时重复触发，不能通过键盘触发这个事件
- mouseenter:在鼠标光标从外部首次移动到元素范围内触发，不支持冒泡，在光标移动到后代元素上不会触发。属于DOM3级事件标准。
- mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发，不支持冒泡，在光标移动到后代元素上不会触发。属于DOM3级事件标准。
鼠标事件都是在浏览器视口的特定位置上发生的。这个位置信息保存在事件对象的clientX，clientY属性中。它们的值表示事件发生时鼠标指针在视口的水平和垂直坐标。这些值不包含页面滚动的距离，因此这个位置不表示鼠标在页面上的实际位置。
pageX,pageY这两个属性可以告诉你鼠标是在页面的什么位置发生的。这两个属性表示鼠标在页面上的位置，因此坐标时相当于页面本身而非视口的左边和顶边计算的。在没有滚动的状况下，pageX pageY 和clientX clientY的值相等。
pageX =clientX + scrollLeft
pageY= clientY + scrollTop
screenX和screenY 相对于整个电脑屏幕的位置
offsetX offsetY:表示鼠标相对于目标元素边界的坐标（仅IE支持）
滚轮事件
mousewheel:这个事件可以在任何元素上触发。当用户通过鼠标滚轮与页面上交互，在垂直方向上滚动页面时就会触发。特有属性wheelDelta 。当用户向上滚动时wheelDelta是120的倍数，当用户向下滚动时wheelDelta是-120的倍数。通过wheelDelta的正负号就可以知道鼠标滚轮的滚动方向。
触摸设备
在面向iPhone和iPod中的Safari开发时需要注意：
1.不支持dblclick，双击浏览器窗口会放大画面
2.两个手指放在屏幕上且页面随着手指的移动而滚动时，会触发mouseWheel和scroll事件
3.mousemove事件也会触发mouseover和mouseout事件
键盘事件
- keydown 当用户按下键盘上任意键的时候触发，如果按住不放，会重复触发
- keypress 当用户按下键盘上字符键的时候触发，如果按住不放，会重复触发
- keyup 当用户释放键盘上的键的时候触发
在发生keydown和keyup事件时，event对象的keyCode会包含一个代码。event.keyCode - keyCode:按下键的字符编码
文本事件
textInput事件：主要是对keypress事件补充。用意是将文本显示给用户之前更容易拦截文本。在文本插入文本框之前会触发textInput事件。包含data属性，保存用户输入输入的字符。
HTML5事件
contextmenu
beforeunload
DOMContentLoaded
网友评论