【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之前

}

}

總結

以上是生活随笔為你收集整理的java script 6 折线_Java入门第六篇：Java script(js)的事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。