java script 6 折线_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.οnkeydοwn=function(e){

console.log(e);

}

document.οnkeydοwn=function(){

console.log(window.event)

}

document.οnkeydοwn=function(e){

e= e || window.eventconsole.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.οnkeydοwn=fuction(e){if(e.keycode==18){

isAlt=1;

}if(e.keycode==13){

isEnt=1;

}if(isAlt==1&&isEnt==1){

console.log("同时按下")

}

}

document.οnkeyup=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之前

}

}