[JS中的事件分类]
1、鼠标事件
click/bdlclick/onmouseover/onmouseout
2、 HTML事件
onload/onscroll/onsubmit/onchange/onfocus
3、 键盘事件
keydown:键盘按下时触发
keypress:键盘按下并松开时的瞬间触发
keyup:键盘抬起时触发
[注意事项]
①执行顺序:keydown-->keypress-->keyup
②当长按时，会循环执行keydown-->keypress
③有keydown并不一定有keyup,当事件触发过程中,鼠标将光标移走,将导致没有keyup
④keypress只能捕获键盘上的数字、字母、符号键，不能捕获各种功能键，而keydown和keyup可以
⑤keypress支持区分大小写，keydown和keyup并不支持
document.onkeydown = function(){
console.log("onkeydown");
}
document.onkeypress = function(){
console.log("onkeypress");
}
document.onkeyup = function(){
console.log("onkeyup");
}
[确定触发的按键]
①在触发的函数中，传入一个参数e，表示键盘事件
②使用e.keyCode，取到按键的ASCII码值，进而确定触发按键；
③所有浏览器的兼容写法(一般并不需要):
var evn = e || event;
var code = evn.keyCode || evn.which || evn.charCode;
[判断组合按键的方式]
var isEnt = false,isAlt = false;
document.onkeydown = function(e){
if(e.keyCode == 13) isEnt = true;
if(e.keyCode == 18) isAlt = true;
if(isEnt == true && isAlt == true){
console.log("您按了Alt+回车键");
}
}
document.onkeyup = function(e){
if(e.keyCode == 13) isEnt = false;
if(e.keyCode == 18) isAlt = false;
}
[js中的DOM0事件模型]
??1、内联模型(行内绑定):直接将函数名作为HTML标签的某个事件属性的属性值;
??eg:<button onclick="func()">DOM0内联模型</button>
??优点:使用方便。
??缺点:违反了w3c关于HTML与JavaScript分离的基本原则;
??
??2、脚本模型(动态绑定):在JS脚本中，取到某个节点,并添加事件属性;
??eg:window.onload = function(){}
优点:实现了HTML与JavaScript分离。
缺点:同一个节点只能绑定一个同类型事件。如果绑定多次,最后一个生效。
?[DOM2事件模型]
?1、添加事件绑定方式:
?①在IE8之前:btn.attachEvent("click",函数);
?②其他浏览器:btn.addEventListener("click",函数，true/false);
?
?参数三:false(默认)表示事件冒泡
????true ?表示事件捕获
?③兼容写法:if(btn2.attachEvent){
?btn2.attachEvent();
?}else{
?btn2.addEventListener();
?}
?2、优点:①可以给同一节点，添加多个同类型事件;
??②提供了可以取消事件绑定的函数;
??
?3、取消DOM2事件绑定:
?注意:如果要取消DOM2的事件绑定,那么在绑定事件时，处理函数必须要使用有名函数,而不能使用匿名函数。
?btn2.removeEventListener("click",func2);
btn2.detachEvent("onclick",func2);
【js中的事件流】
1、事件冒泡：当某DOM元素触发一种事件时，会从当前结点开始，逐级往上触发其祖先节点的同类型事件，
直到DOM根节点；
什么情况下会产生事件冒泡？
① DOM0模型绑定事件，全部都是冒泡；
② IE8之前，使用attachEvent()绑定的事件，全部都是冒泡；
③ 其他浏览器，使用 ?addEventListener 添加的事件，当第三个参数省略或者为false时，为事件冒泡。
2、事件捕获：当某DOM元素触发一种事件时，会从文档节点开始，逐级向下chufa其祖先节点的同类事件，直到该节点自身；
什么情况下会触发事件捕获？
① 使用 ?addEventListener 添加事件，当第三个参数为true时，为事件捕获；
↓DOM根节点 ??????????↑
?↓ ??↑
?捕 ?爷爷节点 ???????冒
?↓ ??↑
?获 ???父节点 ???????泡
?↓ ??↑
?↓ ??当前节点 ??↑
3、 阻止事件冒泡
在IE浏览器中使用：e.cancelBubble = true;
在其他浏览器中使用：e.stopPropagation();
兼容其它浏览器使用：
function myParagraphEventHandler(e) {
???e = e || window.event;
???if (e.stopPropagation) {
???????e.stopPropagation(); //IE以外
???} else {
???????e.cancelBubble = true; //IE8之前
???}
}
??????????☆4、 取消事件默认行为：
在IE浏览器中使用：e.returnValue = false;
在其他浏览器中使用：e.preventDefault();
兼容其它浏览器使用：
function eventHandler(e) {
???e = e || window.event;
???// 防止默认行为
???if (e.preventDefault) {
???????e.preventDefault(); //IE以外
???} else {
???????e.returnValue = false; //IE
???}
}
JS学习五(js中的事件)
原文地址：http://www.cnblogs.com/suitongyu/p/7469493.html