（一）什么是事件
JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。
网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。
事件通常与函数配合使用，当事件发生时函数才会执行
（二）常见事件
onabort 图像的加载被中断
onblur 元素失去焦点
onchange 元素发生改变且失去焦点
onclick 当用户点击某个对象时调用的句柄
ondblick 当用户双击某个对象时调用的事件句柄
onerror 在加载文档或图像时发生错误
onfocus 元素获得焦点
onkeydown 某个键盘按键被按下（按下任意键）
onkeypress 某个键盘按键按下并松开（按下字符键）
onkeyup 某个键盘按键被松开
onload 一张页面或一幅图像完成加载
onmousedown 鼠标按钮被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标移到某元素之上
onmouseup 鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被重新调整大小
onselect 文本被选中
onsubmit 确认按钮被点击
onunload 用户退出页面
(三) event:
事件对象 , 当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-----event对象，供我们在需要的调用。
注：事件对象必须在一个事件调用的函数里面使用才有内容
1. 兼容：
一、ie/chrome : event是一个内置全局对象
二、标准下(IE9及以上，chrome) : 事件对象是通过事件函数的第一个参数传入
2. 事件函数：
事件调用的函数，一个函数是不是事件函数，不在定义的决定，而是取决于这个调用的时候
1)
document.onclick = function() {
alert(event);
};
function fn1(ev) {
alert( event );
}
2)
fn1(); // undefined，因为不是事件调用
3)
document.onclick = fn1; //正常弹出，因为是事件调用的。
3.兼容处理
var e=e || window.event
(四)事件流
三个阶段：事件捕获阶段 处于目标阶段 事件冒泡阶段
1.阻止冒泡;
标准;event.stopPropagation()
IE:event.cancelBubble=true
跨浏览器兼容阻止冒泡
function stopPropagation(ev) {
if(ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
2.阻止默认行为
标准： event.preventDefault() prevent（阻止）
IE: event.returnValue=false return false
// 跨浏览器兼容阻止默认行为
function preventDefault(ev) {
if(ev.preventDefault) {
ev.preventDefault();
} else {
ev.returnValue = false;
}
}
1. 事件冒泡 :
事件冒泡的解释 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window。这种机制我们称之为”事件冒泡机制”
如果这个元素它有事件函数绑定，哪么在冒泡时，就会执行它绑定的函数。如果它没有事件函数绑定，也不妨碍它接收它的子级传过来的事件，以及它向它的父级传播事件。
(一) 事件处理程序：
1. HTML事件处理程序:
定义：在HTML中绑定的事件。
缺点：不能实现行为和结构的分离。会导致内存的高度泄露；
2. DOM0事件处理程序
优点：简单， 跨浏览器兼容。
缺点： 不能同时绑定多个事件。
添加（绑定）：
语法：对象.on事件类型=fn;
说明：
fn 匿名函数也可以是有名函数；
btn.onclick=function(){}
btn.onclick=say 只写函数名
删除
语法：对象.on事件类型=null
3. DOM2事件处理程序
优点：同时绑定多个事件处理程序。
添加(绑定）语法：对象.addEventListener(事件名，函数，布尔值)
false 冒泡阶段 true 捕获阶段
删除(绑定）语法：对象.removeEventListener(参数与添加的参数完全相同) //不能删除匿名函数
4. IE事件处理程序：
优点：同时绑定多个事件处理程序。
添加语法： 对象.attachEvent(on+事件名,函数)
删除语法： 对象.detachEvent(on+事件名，函数) 参数与添加的的时候完全一样
(二) 事件绑定的第二种形式 :
1. 第一种绑定形式，给一个对象绑定一个事件处理函数的第一种形式
//obj.onclick = fn;
演示文档：
function fn1() {
alert(this);
}
function fn2() {
alert(2);
}
document.onclick = fn1;
document.onclick = fn2; //会覆盖前面绑定fn1
2. 给一个对象的同一个事件绑定多个不同的函数
给一个元素绑定事件函数的第二种形式
ie：obj.attachEvent(事件名称，事件函数);
1.没有捕获
2.事件名称有on
3.事件函数执行的顺序：标准ie-》正序 非标准ie-》倒序
4.this指向window
标准：obj.addEventListener(事件名称，事件函数，是否捕获);
1.有捕获
2.事件名称没有on
3.事件执行的顺序是正序
4.this是触发该事件的对象
非标准的IE没有捕获，但是标准的IE有捕获，即标准的IE有两套，如果用的是attachEvent就没有捕获，而用addEventListener就有捕获。
演示文档：
IE（非标准）
document.attachEvent('onclick', fn1);
document.attachEvent('onclick', fn2);
标准 （包括标准 IE）
document.addEventListener('click', fn1, false);
document.addEventListener('click', fn2, false);
注意这两种形式的区别：
Bind方法的封装：
function bind(obj, evname, fn) {
if (obj.addEventListener) {
obj.addEventListener(evname, fn, false);
} else {
obj.attachEvent('on' + evname, function() {
fn.call(obj);
});
}
}
bind(document, 'click', fn1);
bind(document, 'click', fn2);
(三) 事件的取消
我们有两种形式的绑定，哪么对应的，也有两种形式的取消：
第一种事件绑定形式的取消：
演示文档：
function fn1() {
alert(1);
}
function fn2() {
alert(2);
}
document.onclick = fn1;
document.onclick = null; //取消，什么都不执行，因为你取消了
第二种，分ie和标准两种形式：
ie : obj.detachEvent(事件名称，事件函数);
document.attachEvent('onclick', fn1);
document.attachEvent('onclick', fn2);
document.detachEvent('onclick', fn1);
这时，点击只出2，1没了，因为你取消了。
标准 : obj.removeEventListener(事件名称，事件函数，是否捕获);
document.addEventListener('click', fn1, false);
document.addEventListener('click', fn1, true);
document.addEventListener('click', fn2, false);
document.removeEventListener('click', fn1, false); // 取消了1出去的
(一) 浏览器的默认行为
比如：右键，按空格向下滚等等。
事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情。
怎么阻止？分两步：
第一步：当前这个行为是什么事件触发的。
第二步：然后在这个事件的处理函数中使用preventDefault(ev);
如：阻止了按空格向下滚动
document.onkeydown = function() {
preventDefault(ev);
}
右键菜单事件
如：oncontextmenu : 右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发
document.oncontextmenu = function() {
alert(1)
return false;
}
案例：自定义右键菜单.html
(二) 鼠标滚轮事件：
ie/chrome : onmousewheel
event.wheelDelta
上：120
下：-120
Wheel（轮）
Delta（三角洲，河口）
firefox : DOMMouseScroll 必须用addEventListener
event.detail
上：-3
下：3
在火狐下，为了做IE的兼容，需要判断一下元素有没有addEventListener这个属性。
案例：鼠标滚轮事件 1.html
封装：getWheelDelta
阻止事件的两种方式：
如果是普通的形式，用return false来阻止。
如果是用addEventListener，就要用ev.preventDefault();
IE下面的attachEvent，它用的还是return fasle。
练习：
1、通过鼠标滚轮控制价格
2、通过鼠标滚轮控制图片大小。
(三) 事件类型
UI事件：不一定与用户操作有关
load unload scroll error resize select
焦点事件:
当元素获得或失去焦点时触发；
blur ：在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
focus ：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
change：在元素失去焦点，并且当前元素内容有所改变的时候，触发此事件；
鼠标事件：
鼠标事件，当用户通过鼠标在页面上执行操作时触发；
click
dblclick
mousedown
mouseup
mousemove
mouseover
mouseout
mouseenter在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。
mouseleave在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。
键盘事件：
keydown 按下任意键时，触发
keypress 按下字母键时候，触发
keyup 释放按键的时候，触发
keyCode 获取按键的ascii码
回车键 13
空格键 32
A-Z 65-
0-9 48
左上右下 37 38 39 40
表单：
submit
reset
change
select
滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
文本事件，当在文档中输入文本时触发；
键盘事件，当用户通过键盘在页面上执行操作时触发；
合成事件，当为 IME（Input Method Editor，输入法编辑器）输入字符时触发；
变动（mutation）事件，当底层 DOM 结构发生变化时触发。
(四) 事件委托：
事件委托，也叫事件代理：利用冒泡的原理，把事件加到父级或者父父级上，触发执行效果。
好处：
1、提高性能
2、新添加的元素，还会有之前的事件
3、解决内存泄露或者节省内存
事件源：
事件目标：你实际操作的目标对象，不一定是你绑定事件的对象
event对象：不管在那个事件中，只要你操作的那个元素就是事件源。（有兼容性的问题）所以要做兼容
ie下：event.srcElement
标准：event.target
var ev = ev || event;
var target = ev.target || ev.srcElement;
事件源也可以通过nodeName 得到当前这个标签的标签名。即
target.nodeName