Java入门第六篇：Java script(js)的事件

【js中的事件分类】

1.鼠标事件

　　onclick、ondbclick、onmouseover、onmouseout 等

 

2.HTML事件:

　　onload/onunload/onsubmit/onresize/onfocus/onchange/onscroll

 

3.键盘事件:

　　1.keydown :键盘按下;

 

　　2.keypress :键盘按下后抬起的瞬间;

 

　　3.keyup :键盘抬起;

 

　　[注意事项]

 

　　　　1.执行顺序 keydown-keypress-keyup

　　　　2.keypress只能捕获字母、数字、符号键，而不能捕获功能键。

　　　　3.长按时循环执行keydown-keypress；

　　　　4.有keydown，不一定有keyup，当长按时焦点失去，不再触发keyup。

　　　　5.keypress 区分字母大小写，keydown，keyup不区分。

 

4..事件因子，当触发一个事件时，该事件将向事件所调用的函数中，默认传入一个餐宿，这个参数就是时间因子，包含了该事件的各种详细信息。

 
document.onkeydown = function(e){
　　console.log(e);
}
 
document.onkeydown = function(){
　　console.log(window.event)
}
 
document.onkeydown = function(e){
　　e = e || window.event
　　console.log(e);
}(兼容写法)

5.如何确定键盘按键？

 

　　1.在触发的函数中，接受事件因子e。

　　2.可以使用e.key直接取到按下的按键字符。(不推荐使用)

　　3.可以使用 keyCode/which/charCode 取到按键的ASCII码值；

　　var code= e.keyCode|| e.which || e.charCode (兼容各种浏览器的写法。)

 

　　如何确定组合键？

 

var isAlt=0; isEnt=0;
 
document.onkeydown =fuction(e){
　　if(e.keycode==18){
　　　　isAlt=1;
　　}
　　if(e.keycode==13){
　　　　isEnt=1;
　　}
　　if(isAlt==1&&isEnt==1){
　　　　console.log("同时按下")
　　}
}
document.onkeyup =fuction(e){
　　if(e.keycode==18){
　　　　isAlt=0;
　　}
　　if(e.keycode==13){
　　　　isEnt=0;
　　}
 
}

【DOM0事件模型】

 

1.内联模型(内联绑定):

　　将函数名直接作为HTML标签中事件属性的属性值。

 

　　缺点:不符合W3C中关于内容与行为分离的基本规范。

 

2.脚本模型(动态绑定)

　　通过在js中选定某个节点，然后给节点添加onclick属性，

 document.getElementById("jb").onclick = function(){
 　　alert(123);
 }

　　优点: 符合W3C中内容与行为分离的基本规范。

　　缺点: 同一个节点，只能添加一次同一类事件。如果添加多次，后来者生效。

 

3.DOM0 共有缺点:通过DOM0绑定的事件，一旦绑定无法取消。

 

【DOM2事件绑定】

 

　　1.添加DOM2事件绑定:

　　　　1. IE8之前，使用.attachEvent("onclick",函数)；

　　　　2. IE8之后，使用.addEventListener("click",函数)；

　　　　3.传入参数三 :false(默认)表示时间冒泡；传入true表示时间捕获。

 

2.DOM2绑定的优点：

 

　　1.同一节点，可绑定多个同一类事件。

　　2.使用DOM2事件，可以用特有函数进行事件取消。

 

3.DOM2取消事件绑定:

　　1.detachEvent("onclick",函数名): 取消attachEvent绑定的事件。

　　2.removeEventlistener("click",函数名): 取消addEventlistener绑定的事件。

　　!!!!注意，如果时间需要取消，那么传入的函数不能是匿名函数，取消时 第二个函数需要传入函数名。

 

【事件流模型】

　　1.事件冒泡: 当触发一个节点的事件时，会从当前节点开始，依次触发其祖先节点的同类型事件，直到DOM根节点。

 

　　2.事件捕获: 当触发一个节点的事件时，会从DOM根节点开始，依次触发捕获节点的同类型事件，然后再触发冒泡事件。

 

　　3.什么时候时间冒泡? 什么时候时间捕获？

 

　　当使用addEventlistener 第三个参数设为true，表示事件捕获，

　　除此之外的所有事件绑定，均为事件冒泡。

 

　　4. 阻止事件冒泡的传递:

function stopnextmaopao(e){
　　e= e||window.Event;
　　if(e.stopPropagation){
　　　　e.stopPropagation(); //IE 10之后
　　}else{
　　　　e.cancelBubble = true; //IE10及以前
　　}
}

 

5.阻止默认行为。

 

function eventHandler(e) { // 防止默认行为
　　e = e || window.event;
　　　if (e.preventDefault) {
　　　　e.preventDefault(); //IE10之后
　　} else {
　　　　e.returnValue = false; //IE10之前
　　}
}