【滑稽】每日一记 JS中的事件

鼠标事件:
click、dbclick、mouseover、mousemove、mousedown、mouseup

键盘事件:
keydown 键盘按下时触发
keypress 键盘按下并抬起的瞬间触发
keyup 键盘抬起时触发
注意：1、执行顺序：keydown-keypress-keyup
2、长按时，会循环执行keydown-keypress
3、有keydown事件，不一定有keyup事件（事件触发过程中，鼠标移走点击别的地方，可能没有keyup事件）
4、keypress事件只能捕获字母、数字、符号键（空格和回车也是），不能捕获功能键，
keydown和keyup基本可以捕获所有功能键（特殊除外）
keypress 区分大小写，keydown和keyup不区分；
keydown和keyup区分主键盘和小键盘，keypress不区分
keypress 只能捕获单键，keydown和keyup可以捕获组合键

确定键盘触发按键：
在触发函数中，传入参数e，代表按键事件；
通过e.keyCode确认按键ASCII码值，进而确定按键；
兼容浏览器系统的写法：
var evn = e||event; //取到键盘事件
var code = evn.keyCode||evn.which||evn.charCode; //取到按键编码

HTML事件:

DOM0事件模型:
内联模型:直接将函数名作为html标签的某个事件属性的属性值
eg：<button onclick="func()"></button>
缺点：违反了W3C关于html与JS分离的基本原则
脚本模型:在JS脚本中通过事件属性进行绑定
eg：window.onload = function(){}
局限性：同一节点只能绑定一个同类型事件

JS中DOM2事件模型：
1、添加事件绑定：
IE10之前：btn.attachEvent("onclick",函数);
其他浏览器：btn.addEventListener（"click",函数,true/false）

　　第一个参数为事件
　　第三个参数：false为默认，表示事件冒泡，true，表示事件捕获
兼容写法：

if(btn.attachEvent){
　　btn.attachEvent();
}else{
　　btn.addEventListener();
}

优点：同一节点可以添加多个同类型事件的监听器
2、取消事件绑定：
注：如果要取消事件绑定，那么在绑定事件时，
回调函数必须使用有名函数，而不能使用匿名函数，
因为在取消事件绑定时，需要传入函数名：
.removeEventListener("click",函数名)
.datachEvent("onclick",函数名)

JS中的事件流：
1、事件冒泡：当某DOM元素触发某事件时，会从当前DOM元素开始，逐个触发其祖先元素的同类型事件，直到DOM根节点
DOM0模型均为事件冒泡，IE中使用.attachEvent()添加的事件均为冒泡；
其他浏览器使用.addEventListener()添加的事件当第三个参数为false时，为冒泡
2、事件捕获：当某DOM元素触发某事件时，会从DOM根节点开始，逐个触发器祖先元素的同类型事件，直到触发到当前元素为止
只有使用.addEventListener()添加事件并设置第三个参数为true时才为捕获
3、阻断事件冒泡\捕获：
阻断捕获只会触发根节点；
IE浏览器中将e.cancleBubble属性设为true，其他浏览器调用e.stopPropagation();方法
兼容写法:

function myParagraphEventHandler(e) {
　　e = e || window.event;
　　if (e.stopPropagation) {
　　e.stopPropagation(); //IE以外 
　　} else {
　　e.cancelBubble = true; //IE 
　　}
}

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 
　　}
}