JavaScript事件

1.事件：js和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。

2.JavaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件
鼠标事件的事件处理函数为：（4组）

｛click,dblclick｝，｛mousedown,mouseup｝，｛mouseover,mouseout｝，｛mousemove｝

（1）click：用户单击鼠标按钮或按下回车键时触发       dblclick：双击                                                                                

        （2） mousedown：按下鼠标还未抬起时触发      mouseup：释放鼠标按钮时触发 

        （3） mouseover：鼠标移到某个元素上方时触发      mouseout：鼠标移出某个元素上方时触发    

        （4）mousemove：鼠标指针在元素上移动时触发
键盘事件的事件处理函数为：（3个）
keydown：用户按下键盘上任意键触发，如果按住不放，会重复触发
keypress：用户按下键盘上字符键触发，如果按住不放，会重复触发
keyup：用户释放键盘上的键触发
HTML事件处理函数为：（2种）
window下的：
load / unload：页面完全加载 / 卸载后在window上面触发，或当框架集加载 / 卸载完毕后在框架集上触发
resize：当窗口或框架的大小变化时在window或框架上触发
scroll：当用户滚动带滚动条的元素时触发
表单下的：
select：当用户选择文本框（input或textarea）中的一个或多个字符触发  
change：当文本框（input或textarea）内容改变或失去焦点后触发
  focus/blur：当页面或元素失去焦点时在window及相关元素上触发
submit/reset：当用户点击提交/重置按钮在form元素上触发
事件处理函数的一个标准特性是，以某些方式访问的事件对象包含有关于当前事件的上下文信息。
事件处理由3部分组成：对象，事件处理函数，函数。eg：ducument.onclick = function(){};

3.事件对象
一般称为event对象，是浏览器通过函数把这个对象作为参数传递过来的。
function(e){
var e = e || window.event;  //实现跨浏览器兼容获取event对象
alert(e);
}

4.event对象提供的属性：
鼠标事件中两组来获取浏览器坐标的：
 页面可视区：clientX/clientY
 屏幕坐标：screenX/screenY

键盘事件中提供的键码：

在发生keydown和keyup时，keyCode属性中会包含一个代码，与键盘上一个特定的键对应

在发生keypress时，charCode属性是按下的那个键所代表的ASCII编码

5.事件流

（1）事件流：意味着在页面上可有不仅一个，甚至是多个元素响应同一个事件。

（2）冒泡型事件和捕获型事件

冒泡型事件的基本思想是：事件按照从最特定的事件目标到最不特定的事件目标（document对象）的顺序触发。而捕获型事件的顺序正好与冒泡型的相反。

     DOM同时支持这两种事件模型。但是，捕获型事件先发生。两种事件流都会触及DOM中的所有对象，从document对象开始，也在document对象结束。注意：DOM事件模型最独特的性质是，文本节点也触发事件（在IE中不会）

（3）取消事件冒泡/默认行为在W3C和IE中event对象的属性

事件流包括两种模式：冒泡和捕获。现代的浏览器默认情况下都是冒泡模型。事件冒泡，就是从里往外逐个触发。
阻止事件冒泡：
W3C中是stopPropagation()
IE中是cancelBubble
兼容写法：
function stopPro(e){
var e = e || window.event;
window.event ? e.cancelBubble = true : e.stopPropagation();
}

阻止事件的默认行为：

W3C中是preventDefault()

IE中是returnValue

兼容写法：

function preDe(e){

var e = e || window.event;

window.event ? e.returnValue = false : e.preventDefault();

}

还有一个禁止选中,和前面两个一块记吧。
onselectstart几乎可以用于所有对象，其触发时间为目标对象被开始选中时（即选中动作刚开始，尚未实质性被选中），但是不被input和textarea标签支持
用途eg：该事件常使用于使目标对象“禁止变蓝”，比如在很多地方当用户双击时，一些元素会变成蓝色（选中状态），而当我们要避免这种情况时就可以使用该事件
禁止选中：eg：<div id="wrap" onselectstart="return false">ffff</div>
         onselect  是在文本框（input、textarea）内的文本被选中时所触发的事件，其触发时间是在文本被选择以后（即文本已经被选择，已经显式的表现出来）。该事件只被input和textarea标签支持。

6.绑定：

传统方式的绑定：
用onclick，eg:document.onclick = function(){......};
传统绑定的优点
非常简单和稳定，可以确保它在你使用的不同浏览器中运作一致
处理事件时，this关键字引用的是当前元素
传统绑定的缺点 
传统方法只会在事件冒泡中运行
一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数
对应的解绑事件是eg:eg:document.onclick = null;
W3C中：
添加/删除事件是用：addEventListener()和removeEventListener()
三个参数：事件名、函数、冒泡或捕获的布尔值（true表示捕获，false表示冒泡）
好处：可以屏蔽相同的函数；可以设置冒泡或捕获；在事件处理函数内部，this关键字引用当前元素。
IE中：
添加/删除事件是用：attachEvent()和detachEvent()
两个参数：事件名、函数
与W3C的区别：不可以屏蔽相同的函数，需要单独扩展或自定义事件处理；
   只可以设置冒泡；
    IE中的this指向的是window不是DOM对象，可以用call指向DOM对象；
   可以使用attachEvent()接收到event对象
W3C与IE兼容的函数：

解绑的兼容同添加的，只是将名称换成删除的即可