事件

1. 事件模型

window.onload = function () {

var input = document.getElementsByTagName("input")[0];

input.onclick = function () {

alert("Lee");

}

}

2. 事件处理函数

鼠标事件，键盘事件，HTML事件

onclick  //鼠标单击

ondblclick //鼠标双击

onmousedown  //鼠标点击，没有弹起

onmouseover  //放在上面

onmouseup  //鼠标弹起

onmousemove //鼠标移动

onkeydown  //按下键盘

onkeyup //键盘弹起

onkeypress //按下字符键

onload //页面加载完毕后执行

onselect  //选择文本框内字符的时候触发

onchange //文本框内容变化(失去焦点)

onfocus //得到焦点时触发

onblur  //失去焦点时触发

onsubmit //form表单提交触发

onreset //重置表单触发

onresize //窗口大小变化时触发

onscroll //拖动滚动条时触发

3. 事件对象

this对象代表事件发生的对象，因为事件处理函数被绑定到对象上

window.onload = function() {

var box = document.getElementById("box");

box.onclick = function() {

alert(arguements.length);   //默认传递过来一个事件对象参数

}

}

window.onload = function() {

var box = document.getElementById("box");

box.onclick = function(event) {

alert(event);   //可以指定参数接收事件对象, IE浏览器不支持

var e = event || window.event;  //IE浏览器使用window.event传递事件对象

}

}

4. 鼠标事件

鼠标事件对象可以获取鼠标属性

window.onclick = function(event) {

event = event || window.event;

alert(event.button);   //0代表左点击，1代表中间点击 2代表右点击

}

可视区域坐标和屏幕区域坐标

window.onclick = function(event) {

event = event || window.event;

alert(event.clientX + "," + event.clientY);   //可视区域坐标

alert(event.screenX + "," + event.ScreenY);  //屏幕区域坐标

}

修改键属性

shiftKey   //shift+点击

ctlKey    //ctl + 点击

altKey  //alt + 点击

5. 键码和字符编码

window.onkeyup = function(event) {

var event = event || window.event; 

alert(event.keyCode);  //字符键返回小写字母ASCII码

}

window.onkeypress = function(event) {

var event = event || window.event; 

alert(event.keyCode);  //keyPress事件，火狐浏览器字符键返回是0, chrome, IE浏览器可以返回keyCode，并且支持大小写

}

// 对于分号，IE和safari浏览器返回186，其他浏览器返回59

window.onkeypress = function(event) {

var event = event || window.event; 

alert(event.charCode);  //Firefox, Chrome返回键字符编码，支持大小写, IE和opera浏览器不支持

}

6. W3C和IE

window.onkeypress = function(event) {

document.onclick = function(event) {

alert(event.target || event.srcElement);   //W3C使用target属性， IE浏览器使用srcElement.

}

}

//事件流，分为冒泡和捕获，冒泡过程从里往外走，捕获过程从外往里走

window.onkeypress = function(event) {

document.onclick = function(event) {

event.stopPropagation(); //W3C取消冒泡

event.cancelBubble = True; //IE取消冒泡

}

}

7. W3C事件注册

window.addEventListener("load", function(){

alert("Lee");

}, true)  //第三个参数代表捕获模式还是冒泡模式，IE不支持捕获模式, IE8不支持

window.removeEventListener("load", func，false) //删除注册事件

8. IE浏览器事件注册

window.attachEvent("load", function(){

alert("lee");

})    //IE浏览器对于相同函数不互相覆盖，而且不传递this, this为window.

window.detachEvent("load", init);