一、事件流：描述的是从页面中接受事件的顺序。
1. 事件冒泡流：事件开始由最具体的元素接收，然后逐级向上传播至最不具体的节点（文档）。
如点击按钮，不但触发按钮，同时触发包含按钮的<div>，也触发<body>、<html>，一直触发到document。
被所有主流浏览器所兼容。
2. 事件捕获流：与事件冒泡流相反。不太具体的节点更早接收到事件，而最具体的节点最后接收到事件。
事件先由document接收，然后由<html>接收，然后<body>、<div>、<input>。
1. HTML事件处理程序：把事件直接加在标签上，如把onclick事件直接加在input标签上，即加在html结构里。
HTML事件处理程序缺点：HTML和JavaScript代码紧密耦合在一起。
2. DOM0级事件处理程序：把一个函数赋值给一个事件的处理程序属性。
1）用得比较多，因为简单，具有跨浏览器的优势。
2）先把按钮取出来（var btn = document.getELementById("id");btn.οnclick=function(){}）。删除事件：btn.οnclick=null;
3. DOM2级事件处理程序（IE不支持）
1）DOM2级事件定义了两个方法，用于处理指定事件处理程序和删除事件处理程序的操作，即addEventListener()和removeEventListener()。
2）所有DOM节点中都包含这两个方法，接受3个参数：要处理的事件名、作为事件处理程序的函数和布尔值（true表示在捕获事件阶段调用事件处理程序，false表示在冒泡时间阶段调用事件处理程序）。
3）例：btn3.addEventListener("click", showMes, false); 事件名需要去掉“on”。
4）通过addEventListener方法添加的事件只能通过removeEventListener来删除。
5）btn3.removeEventListener("click", showMes, false); removeEventListener必须和addEventListener传入相同的参数。
6）可以通过调用方法两次来为一个事件添加多个事件处理程序。
4. IE事件处理程序（IE、Opera支持，IE11已经删除该方法）
1）attachEvent("onclick", showMes); detachEvent("onclick", showMes);此时需要加上“on”。
2）接收相同的两个参数，即要处理的事件名和作为事件处理程序的函数。
3）只支持事件冒泡，所以不需要传入第三个参数。
5. 跨浏览器的事件处理程序
1）恰当地使用能力检测
2）小tip：element.onclick === element["onclick"];
3）为了方便使用，将跨浏览器的事件处理程序封装为一个对象。
var eventUtil = {
// 添加句柄
addHandler: 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;
}
},
// 删除句柄
removeHandler: 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;
},
// 取得事件类型
getType: function (event) {
return event.type;
},
// 取得事件来源的元素
getElement: 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;
}
}
};
使用方法：eventUtil.addHandler(btn, "click", showMes);
三、事件对象：在触发DOM事件时都会产生一个对象，即事件对象event。对象中包含了事件元素、事件类型，以及其他信息，如鼠标的位置，键盘的按键等。
1. DOM中的事件对象（event）
事件对象自动传入作为事件处理程序的函数中，如showMes()，加入参数（参数名e、event等），showMes(event)，则event则成为了接收事件对象的参数，可在showMes(event)中调用event对象的属性与方法等。
1）type属性 用于获取事件类型
2）target属性 用于获取事件目标，即事件来自于哪一个元素（如input）
3）stopPropagation()方法 用于阻止事件冒泡。在本元素的事件处理程序的函数中阻止即可，这样就阻止了冒泡的过程，而不需要一层层向上挨个阻止。
4）preventDefault()方法 阻止事件的默认行为。同样在本元素的事件处理程序的函数中使用，来阻止本元素的默认行为，如<a>的跳转。
2. IE中的事件对象
1）type属性 用于获取事件类型
2）srcElement属性 用于获取事件目标，即事件来自于哪一个元素（如input)
为兼容性，可写作var element = event.target || event.srcElement;
同样为兼容性，需要在函数中写event = event（接收到的event，也就是参数） || window.event（window的event，并不是接收到的，与前者不同）;（IE浏览器需要添加window）
3）cancelBubble属性 用于阻止事件冒泡。true表示阻止事件冒泡，false表示不阻止事件冒泡。
4）returnValue属性 用于阻止事件的默认行为。默认为true，设为false则表示阻止事件的默认行为。
四、事件类型
1. 鼠标事件
1）鼠标事件都是在浏览器的特定位置上发生的，这个位置信息保存在事件的clientX和clientY属性中。
2）要拖动的控件，position必须等于absolute。
3）如果要取element.style.left/top的值，则这个值必须事先定义，在HTML中定义，否则为空。甚至在CSS定义中也不行。这时如果要取面板的坐标，使用element.offsetLeft/Top。
4）offsetWidth/Height属性，获取盒子的宽度/高度。
5）onmousedown-点下鼠标 onmousemove-拖动鼠标 onmouseup-松开鼠标
2. 键盘事件
1）keyDown（.onkeydown） 当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
2）keyPress 当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。
3）keyUp 当用户释放键盘上的键时触发。
4）console.log()，在控制台输出。
5）在哪个元素调用了函数，元素内的this就指哪个元素。
6）event.keyCode返回按键的键码，就知道按下了哪个键。
1. 事件冒泡流：事件开始由最具体的元素接收，然后逐级向上传播至最不具体的节点（文档）。
如点击按钮，不但触发按钮，同时触发包含按钮的<div>，也触发<body>、<html>，一直触发到document。
被所有主流浏览器所兼容。
2. 事件捕获流：与事件冒泡流相反。不太具体的节点更早接收到事件，而最具体的节点最后接收到事件。
事件先由document接收，然后由<html>接收，然后<body>、<div>、<input>。
1. HTML事件处理程序：把事件直接加在标签上，如把onclick事件直接加在input标签上，即加在html结构里。
HTML事件处理程序缺点：HTML和JavaScript代码紧密耦合在一起。
2. DOM0级事件处理程序：把一个函数赋值给一个事件的处理程序属性。
1）用得比较多，因为简单，具有跨浏览器的优势。
2）先把按钮取出来（var btn = document.getELementById("id");btn.οnclick=function(){}）。删除事件：btn.οnclick=null;
3. DOM2级事件处理程序（IE不支持）
1）DOM2级事件定义了两个方法，用于处理指定事件处理程序和删除事件处理程序的操作，即addEventListener()和removeEventListener()。
2）所有DOM节点中都包含这两个方法，接受3个参数：要处理的事件名、作为事件处理程序的函数和布尔值（true表示在捕获事件阶段调用事件处理程序，false表示在冒泡时间阶段调用事件处理程序）。
3）例：btn3.addEventListener("click", showMes, false); 事件名需要去掉“on”。
4）通过addEventListener方法添加的事件只能通过removeEventListener来删除。
5）btn3.removeEventListener("click", showMes, false); removeEventListener必须和addEventListener传入相同的参数。
6）可以通过调用方法两次来为一个事件添加多个事件处理程序。
4. IE事件处理程序（IE、Opera支持，IE11已经删除该方法）
1）attachEvent("onclick", showMes); detachEvent("onclick", showMes);此时需要加上“on”。
2）接收相同的两个参数，即要处理的事件名和作为事件处理程序的函数。
3）只支持事件冒泡，所以不需要传入第三个参数。
5. 跨浏览器的事件处理程序
1）恰当地使用能力检测
2）小tip：element.onclick === element["onclick"];
3）为了方便使用，将跨浏览器的事件处理程序封装为一个对象。
var eventUtil = {
// 添加句柄
addHandler: 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;
}
},
// 删除句柄
removeHandler: 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;
},
// 取得事件类型
getType: function (event) {
return event.type;
},
// 取得事件来源的元素
getElement: 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;
}
}
};
使用方法：eventUtil.addHandler(btn, "click", showMes);
三、事件对象：在触发DOM事件时都会产生一个对象，即事件对象event。对象中包含了事件元素、事件类型，以及其他信息，如鼠标的位置，键盘的按键等。
1. DOM中的事件对象（event）
事件对象自动传入作为事件处理程序的函数中，如showMes()，加入参数（参数名e、event等），showMes(event)，则event则成为了接收事件对象的参数，可在showMes(event)中调用event对象的属性与方法等。
1）type属性 用于获取事件类型
2）target属性 用于获取事件目标，即事件来自于哪一个元素（如input）
3）stopPropagation()方法 用于阻止事件冒泡。在本元素的事件处理程序的函数中阻止即可，这样就阻止了冒泡的过程，而不需要一层层向上挨个阻止。
4）preventDefault()方法 阻止事件的默认行为。同样在本元素的事件处理程序的函数中使用，来阻止本元素的默认行为，如<a>的跳转。
2. IE中的事件对象
1）type属性 用于获取事件类型
2）srcElement属性 用于获取事件目标，即事件来自于哪一个元素（如input)
为兼容性，可写作var element = event.target || event.srcElement;
同样为兼容性，需要在函数中写event = event（接收到的event，也就是参数） || window.event（window的event，并不是接收到的，与前者不同）;（IE浏览器需要添加window）
3）cancelBubble属性 用于阻止事件冒泡。true表示阻止事件冒泡，false表示不阻止事件冒泡。
4）returnValue属性 用于阻止事件的默认行为。默认为true，设为false则表示阻止事件的默认行为。
四、事件类型
1. 鼠标事件
1）鼠标事件都是在浏览器的特定位置上发生的，这个位置信息保存在事件的clientX和clientY属性中。
2）要拖动的控件，position必须等于absolute。
3）如果要取element.style.left/top的值，则这个值必须事先定义，在HTML中定义，否则为空。甚至在CSS定义中也不行。这时如果要取面板的坐标，使用element.offsetLeft/Top。
4）offsetWidth/Height属性，获取盒子的宽度/高度。
5）onmousedown-点下鼠标 onmousemove-拖动鼠标 onmouseup-松开鼠标
2. 键盘事件
1）keyDown（.onkeydown） 当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
2）keyPress 当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。
3）keyUp 当用户释放键盘上的键时触发。
4）console.log()，在控制台输出。
5）在哪个元素调用了函数，元素内的this就指哪个元素。
6）event.keyCode返回按键的键码，就知道按下了哪个键。
51
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
