JS事件基礎

1.event物件

（1）用來獲取事件的詳細資訊：滑鼠位置、鍵盤位置

document的本質：document.childNodes[0].tagName

例子：獲取滑鼠位置：clientX橫座標，clientY縱座標

程式碼如下：

<!DOCTYPE html>

<html>

<head>

window.onload=function()

{

document.onclick=function()

{

alert(event.clientX+','+event.clientY);

}

</script>

</head>

<body>

</body>

</html>

以上程式碼會有相容問題

alert(event.clientX+','+event.clientY);大部分適合IE

把上面程式碼換成alert(ev.clientX+','+ev.clientY);適用於火狐，不支援IE

現在怎麼解決相容問題呢？程式碼如下

<!DOCTYPE html>

<html>

<head>

window.onload=function()

{

document.onclick=function(ev)

{

//alert(event.clientX+','+event.clientY);適用於IE

//alert(ev.clientX+','+ev.clientY);//適用於火狐

var oEvent=ev||event;//報錯ev不存在

alert(oEvent.clientX+','+oEvent.clientY);

}

};

</script>

</head>

<body>

</body>

</html>

以上總結出解決event物件的相容性方法就是

設定一個變數 var oEvent=en||event

2事件冒泡： 事件冒泡就是會把事件一直傳遞給父級，一直到document，小知識document是一個隱藏起來的最大父級

事件冒泡例子：程式碼如下

<!DOCTYPE html>

<html>

<head>

<style>

div{

padding:50px;

}

</style>

</head>

這個例子就是說明子級的事件會傳遞給父級，這就是事件冒泡

</div>

</body>

</html>

執行上面程式碼點選一下最裡面的紅色就懂了

3.鍵盤事件

KeyCode：獲取使用者按下鍵盤的哪個按鍵

用法程式碼：

document.onkeydown=function(ev)

{

var oEvent=ev||event;

alert(oEvent.keyCode);

}

</script>

執行以上程式碼隨便按下某個鍵就會報出數字，這個數字就對應這個按鍵

例子2：如何使用按鍵回車提交某個資訊

<!DOCTYPE html>

<html>

<head>

window.onload=function()

{

var oBun1=document.getElementById('bu1');

var oBun3=document.getElementById('text1')

oBun1.onkeydown=function(ev)

{

var oEvent=ev||event;

if(event.keyCode==13)

{

oBun3.value=oBun3.value+oBun1.value;

oBun1.value=''

}

</script>

</head>

<body>

</body>

</html>

還有如何使用ctry+回車提交

只需要把如上程式碼if部分改為

if(event.keyCode==13 || oEvent.ctrlkey)

keyCode其他屬性

ctrlKey、shiftKey、altKey

JS中event事件

相關文章