事件的类型：
鼠标事件，键盘事件，进度事件，表单事件，突变事件（修改DOM节点间时发生），触摸事件，错误事件（出错时发生）
window对象的load事件在页面加载时触发，unload事件在页面卸载时触发（用户关闭浏览器，或转向另一个页面），window对象的事件处理程序实际上放在<body>开标记中。
<body onl oad="function()" onunload="function()">
将代码连接到事件
1.通过HTML属性处理事件
将this作为参数传递给函数的时候，这时候参数名一般取为that
//使用event判断事件类型
<p ondblclick="handle(event)">paragraph</p>
<h1 onclick="handle(event)">heading 1</h1>
<span onm ouseover="handle(event)">special text</span>
function handle(e){
if(e.type == "mouseover"){
alert("you move the mouse on the div")
}
else if(e.type == "click"){
alert("you had click the div")
}
}
2通过对象属性处理事件
把对象的事件处理程序属性设置为前面定义的函数
function(){
XXX
}
document.getElementById("XXX").onclick = function;
删除事件处理程序只需要把null赋予事件处理程序属性即可。
标准事件模型
DOM标准定义了一个对象EventTarget，其作用是定义一种标准的方式，为目标上的事件动态添加和删除监听器，DOM中的每个元素节点都是一个EventType。
DOM标准还定义了一个Event对象，该对象提供了触发事件的元素信息，并允许在脚本中获取该元素。它提供了一组规则，以标准的方式确定何种元素生成事件，生成何种类型事件，以及何时触发。如果要在脚本中使用Event对象（下面有详细介绍），则必须将它作为参数，传入与事件处理程序关联的函数。
//标准事件方式
var h_link = document.getElementById("h")
h_link.addEventListener("click",function(e){
var new_node = document.createElement("h2")
var new_text = document.createTextNode("hello hello")
new_node.appendChild(new_text)
h_link.appendChild(new_node)
e.preventDefault() //禁止发送默认操作的标准方式
})
注销事件监听器：
removeEventListener()
一个元素可以注册多个事件监听器，这些监听器按他们注册的顺序执行。
Event对象（使用事件数据）这是一个全局对象
属性：
1.bubbles 表示是否允许事件冒泡
2.cancelable 表示是否可以取消事件的默认行为
3.currentTarget 事件在DOM中传递时，指定事件的当前目标
4.defaultPrevented 表示在事件上是否调用preventDefault()
5.eventPhase 表示事件当前处于事件流的哪个阶段
6.target 该属性表示引发事件的元素
7.timestamp 表示事件发生的时间
8.type 表示事件的名称
MouseEvent对象
属性：
1.altKey 表示事件发生时，是否按下alt键
2.ctrlKey 表示事件发生时，是否按下Ctrl键
3.metaKey 表示事件发生时，是否按下meta键
4.shiftKey 表示事件发生时，是否按下shift键
5.button 表示按下鼠标的哪一个按钮
6.clientX 表示事件发生时，鼠标指针在浏览器窗口中的水平坐标
7.clientY 表示事件发生时，鼠标指针在浏览器窗口中的垂直坐标
8.srceenX 表示事件发生时，鼠标指针相对于屏幕坐标原点的水平坐标
9.srceenY 表示事件发生时，鼠标指针相对于屏幕坐标原点的垂直坐标
10.relatedTarget 用于标识第二个事件目标。对于mouseover事件，该属性表示鼠标指针退出的元素。
. 事件：
1.click事件
2.mousedown事件
3.mouseup事件
4.mouseover事件（指针移入）
5.mouseout事件（指针移出）
6.mousemove事件（指针位于元素上方）
KeyboardEvent对象：
属性：
1.altKey 是否按下alt键 2.ctrlKey 同上 3.metaKey 同上 4.shiftKey 同上
5.charCode 用于keypress事件，键的Unicode号 6.keyCode 按下的键，依赖系统和浏览器的数码
旧版本IE的事件处理，使用attchEvent()和detachEvent()事件来替代addEventListener()和removeEventListener()，使用srcElment代替target属性同时，传递参数的时候，需要加上“on”前缀，具体见图片
if(typeof(addEventListener) != "undefinded"){
use addEventListener
}else{
use attachEvent
}
// 函数功能实现
var evt ={
addlistener: function(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn)
}else{
obj.attachEvent("on"+type,fn)
}
},
removeListener: function(obj,type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn)
}else{
obj.detachEvent("on"+type,fn)
}
},
getTarget: function(e){
if(e.target){
return e.target
}else{
return e.srcElement
}
},
preventDefault: function(e){
if(e.preventDefault){
e.preventDefault()
}else{
e.returnValue = false
}
}
};
如果是在一个a标签上添加事件，可以使用obj.preventDefault(e)方法来阻止a标签的默认跳转行为。
内置拖放操作
拖动源事件：
1.dragstart：开始拖动时在元素上触发。从文件系统中拖动一个对象，不会触发该事件。
2.drag：拖动对象的过程中一直触发。
3.dragend：拖动操作结束时触发，无论是否释放了该对象。
4.dragenter：拖动的过程中，鼠标第一次移入目标元素时触发。
5.dragover：拖动过程中，鼠标移动到元素上时，在目标上触发。
6.dragleave：拖动过程中，鼠标离开目标时，在目标上触发。
7.drop：鼠标释放对象时，在目标上触发。
//释放对象
function drapDropHandler(e){
e.preventDefault()
//dropover的默认行为必须被禁止，才能出发drop事件
if(e.type == "dragover"){
dropStatus.innerHtml = "you'ra dragging over the drop zone!"
}else{
dropStatus.innerHtml = "you dropped something!"
}
var dropZone = document.getElementById("dropZone")
var dropStatus = document.getElementById("dropStatus")
dropZone.addEventListener("dragover",drapDropHandler)
dropZone.addEventListener("drop",drapDropHandler)
}
传输数据
拖放操作就是传递数据。拖放规范定义了DataTransfer对象，使用event对象的dataTransfer属性可以访问这个对象。
在dragstart事件处理程序中使用DataTransfer对象的setData()方法设置数据，在drop事件中使用getData()方法读取数据。
getData()方法只带一个参数，调用setData()时使用的数据类型。
//传递数据
function drapDropHandler(e){
e.preventDefault()
//dropover的默认行为必须被禁止，才能出发drop事件
function dragStartHadler(e){
e.dataTransfer.setData("text","drag and drag!")
}
if(e.type == "dragover"){
dropStatus.innerHtml = "you'ra dragging over the drop zone!"
}else{
dropStatus.innerHtml = e.dataTransfer.getData("text")
}
var dragBox = document.querySelectorAll("[draggable]")
var dropZone = document.getElementById("dropZone")
var dropStatus = document.getElementById("dropStatus")
dragBox.addEventListener("dragstart",dragStartHadler)
dropZone.addEventListener("dragover",drapDropHandler)
dropZone.addEventListener("drop",drapDropHandler)
}
使用元素的on属性，可以把函数连接到元素的事件处理程序上，但是这么做会混合HTML和JavaScript，不建议使用。