javacript中的事件
javacript中的事件
【js中的事件分类】
1、鼠标事件；
click 用户点击对象时
dbclick 用户双击对象时
mouseover 鼠标按钮被按下时
mouseout 鼠标按钮移动时
mousemove 鼠标被移动时
mousedown 鼠标移动到某个元素上
moueseup 鼠标按键松开后
2、键盘事件：
keydown：键盘按下去触发
keypress：键盘按下并松开的瞬间触发
keyup： 键盘抬起时触发
【注意事项；(了解)】
① 执行顺序：keydown-keypress-keyup
② 长按时，会循环不断的执行keydown-keypress
③ 有keydown事件，不一定有keyup事件(事件触发过程中，如果鼠标移走，可能就没有keyup事件。)
④ keypress只能捕获字母、数字、符号键，不能捕获功能键；keydown/keyup基本可以捕获所有功能键(特殊除外)
⑤ keypress区分大小写，keydown和keyup不区分；
⑥ keydown/keyup区分主键盘和小键盘，keypress不区分。
【确定键盘触发按键】
e就是IE8 以前的写法 event（事件）
① 在触发函数中，传入参数e,代表按键时间；
② 通过e.keyCode , 确认按键Ascii码值，进而确定按键；
③ 所有浏览器系统的写法(一般不必要)：
var evn = e||event ；//取到键盘事件
var code = evn.keyCode||evn.which||evn.charCode；//取到按键编
【js的DOM事件模型】
1、内联模型：直接将函数名作为HTML标签的某个时间和苏醒的属性值；
rg：<button onclick="func()">按钮</button>
缺点:weifan W3C 关于HTML与javaScript分离的基础原则；
2、脚本模型：在JS脚本中通过事件属性进行绑定；
eg：window.onload = function(){}
局限性：同一节点，只能保定一个同类型事件；
【JS中的DOM2事件模型】
1、添加事件绑定：
IE10之前： btn1.attachEvent("onclick",函数)
其他浏览器：butn1.addEventListener("click",函数，true/false)；
参数三：false(默认)，表示事件冒泡，true，表示时间捕获
兼容写法： if(btn1.attachEvent){
btn1.attachEvent();
}else{
butn1.addEventListener();
}
优点：同一节点，可以添加对个同类型事件的监听器；
2.取消事件绑定：
注：如果要去事件绑定，那么在绑定事件时，回调函数，必须使用有名函数，而不能使用匿名函数。因为在取消事件绑定时，需要传入函数名。
.removeEventListener("click",函数名)；
.detachEvent("onclick",函数名)；
【js中的事件流】
1、事件冒泡：当某DOM元素触发某时间是，会从当前DOM元素开始，诸葛触发其祖先元素的同类型事件，直到DOM根节点：
DOM模型，均为事件冒泡；
IE中使用.attachEvent()添加的时间，均为冒泡；
其他浏览器， .addEvrentListener添加的事件，当第三个参数是false时，为冒泡；
2、事件捕获：当某DOM元素触发某事件时，会从DOM根节点开始，逐个触发其祖先元素的同类型时间，直到触发哀悼当前元素位置，
只有使用addEvrentListener添加事件，并设置第三个参数为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; //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
}
}
