javascript事件篇

事件：

js使我们有能力创建动态页面，网页中的每个元素都可以产生某些可以触发js函数的事件。我们可以认为事件是可以被js侦测到的一种行为。

事件流：

事件流主要分为冒泡型事件和捕获型事件，IE浏览器目前只支持冒泡型事件，而支持标准DOM的浏览器比如火狐、chrome等两者都支持。
冒泡型事件：从内而外
捕获型事件：从外而内

使用返回值改变html元素的默认行为：
html元素大都包含了自己的默认行为，例如：超链接、提交按钮等，我们可以通过在绑定事件中加上return false;来阻止它的默认行为。

通用性的事件监听方法：

(1)绑定html元素属性
<input type="button" value="clickMe" onclick="checkAction()" />

(2)绑定DOM对象属性
//test为函数名，不能加()，加()是调用的意思
document.getElementById('btn1').onclick = test;
或者：
document.getElementById('btn1').onclick = function(){
    //表达式
}

非通用性的事件监听方法：

IE浏览器的事件监听方法
[object].attackEvent('事件类型', '处理函数')；  //添加监听
[object].detachEvent('事件类型', '处理函数');  //取消监听

标准DOM中的事件监听方法
[object].addEventListener('事件类型', '处理函数', '冒泡型事件或捕获型事件');
[object].removeEventListener('事件类型', '处理函数', '冒泡型事件或捕获型事件');

提示：IE监听方法中的事件类型和标准DOM监听方法中的事件类型写法有点不同，前者事件类型'on'开头，比如：'onclick', 'onmousemove'等，而后者不需要'on'，就是'click', 'mousermove'等
注意：在js中window.onload=function(){}中表示整个html文档加载完成后调用。

访问事件对象

事件对象封装了事件发生的详细信息，尤其是鼠标、键盘事件。如鼠标事件发生的位置、键盘事件的键盘键等。

标准DOM中的事件对象：
在标准DOM浏览器检测到了发生了某个事件时，将自动创建一个Event对象，并隐式地将该对象作为事件处理函数的第一个参数传入。

//在IE中得到事件对象
op.onclick = function(){
    //event本身存在，作为window的一个对象
    var event = window.event;
}

//在标准DOM中得到事件对象
op.onclick = function(event){
    //event做为参数传进来
}

经验之谈：为了兼容不同的浏览器，通常采用下面的方法得到事件对象。
op.onclick = function(event){
    if(window.event){
        event = window.event;
    }
]

Event事件对象常用属性

常用的鼠标事件：
onclick：单击鼠标左键触发
ondbclick：双击鼠标左键触发
onmousedown：单击任意一个鼠标按键时触发
onmouseout：鼠标指针移出一个元素边界时触发
onmousemove：鼠标在某个元素上移动时持续触发
onmouseup：松开鼠标任意一个按键时触发
onmouseover：鼠标指针移动到一个元素上时触发

常用的键盘事件：
onkeydown：按下键盘上某个按键时触发，一直按会持续触发
onkeyup：释放某个按键时会触发
onkeypress：按下某个按键并产生字符时触发，忽略shift等功能键

html事件：
onload：页面完全加载后在window对象上触发
onunload：页面完全卸载后在window对象上触发
onselect：选择了文本框的一个或多个字符时触发
onchange：文本框失去焦点时，并且在它获取焦点后内容发生过改变时触发
onsubmit：单击‘提交’按钮时在表单form上触发
onfocus：任何元素或窗口获得焦点时触发
onblur：任何元素或窗口失去焦点时触发

提示：载入事件onload是最常用的事件之一，因为在页面载入完成之前，DOM的框架还没有搭建完成，因此任何相关操作都不能发声。给window对象分配的onload、onunload事件等同与<boby>元素的onload()、onunload()方法