JavaScript事件的分類和介紹
1、關於事件
在我們使用JavaScript編寫指令碼語言時,會發現我們會常常用到各種事件,如簡單的單擊事件onclick (通過滑鼠點選觸發事件), onkeydown(鍵盤事件 按下鍵盤上任意健值觸發)等等, 通過對這些事件的設定,javascript可以觸發網頁中設定好的事件, 事件的觸發可以是使用者的行為,也可以是瀏覽器的行為 事件通常有這幾種案例, 元素被點選時, 頁面載入完後,元素被滑鼠經過時, 或者HTML的input標籤改變時 事件通常有以下幾種.
2、HTML標籤內聯事件
在學習JavaScript初始時,我們常用到HTML的內聯屬性(需要注意的是,這種方法儘量避免使用因為不利於維護修改 除非必須使用)
程式碼如下:
<inputtype="button"name="btn" id="btn"onclick="alert('HTML內聯屬性')"value="按鈕"/>
//原理是在input標籤中使用按鈕button樣式,並且在裡面加入onclick(滑鼠單擊事件)通過點選按鈕,頁面載入後彈出alert裡面的字串.
3、DOM屬性繫結事件
通過對頁面元素、節點、標籤、ID的獲取,然後使用對應的事件.
程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>汐玬紗個人部落格</title> <meta name="keywords" content="汐玬紗,個人部落格" /> <meta name="description" content="這是我的部落格網站" /> <!--css部分--> <styletype="text/css"> *{margin: 0; padding: 0;} #box{width: 100px;height: 100px;} </style> <!--js部分--> <scripttype="text/javascript"> window.onload=function(){ var oBox=document.getElementById('box'); oBox.onmouseover=function (){ alert('你經過了這個DIV盒子'); }; }; </script> </head> <body> <!--body部分--> <div id="box"></div> </body> </html>
4、常用的事件
4.1、滑鼠事件集合
onclick 滑鼠單擊元素時觸發
ondbclick 滑鼠雙擊元素時觸發
onmouseover 滑鼠經過元素時觸發
onmouseout 滑鼠離開元素時觸發
onmousemove 滑鼠在元素移動時觸發
onmousedown 滑鼠的按鍵按下時觸發
onmouseup 滑鼠的按鍵鬆開時觸發
oncontextmenu 滑鼠的右鍵開啟上下文選單時觸發
onmouseenter滑鼠指標移動到元素上觸發
onmouseleave 滑鼠指標移出元素時觸發
4.2、鍵盤事件集合
onkeydown 任意鍵盤上的按鍵被按下時觸發
onkeyup 任意鍵盤上的按鍵被送開時觸發
onkeypress 任意鍵盤上的按鍵被按下並且鬆開時
4.3、框架/物件（Frame/Object）事件
4.4、表單事件
4.5、剪貼簿事件
4.6、列印事件
4.7、拖動事件
4.8、多媒體（Media）事件
4.9、動畫事件
4.10、過渡事件
4.11、其他事件
4.12、目標事件物件
4.13、事件監聽物件
4.14、文件事件物件
4.15、滑鼠/鍵盤事件物件
4.16、滑鼠/鍵盤事件物件
altKey 觸發時返回檢測"Alt"健是否被按下
button 觸發時返回當前哪個滑鼠按鍵被按下
clientX 觸發時返回當前事件滑鼠的X軸的座標值
clientY 觸發時返回當前事件滑鼠的Y軸的座標值
ctrlKey 觸發時返回當前Ctrl鍵是否被按下
Location 觸發時返回按鍵在鍵盤上的位置
charCode 觸發時返回onkeypress鍵值的字母程式碼
key 觸發時返回當前按鍵按下的識別符號
keyCode 返回按下鬆開鍵盤按鍵的值,或按下/鬆開鍵盤事件的值
which 返回按下鬆開鍵盤按鍵的值,或按下/鬆開鍵盤事件的值
metaKey 返回當前事件被觸發時,"meta"鍵是否被按下
relatedTarget 返回與事件的目標節點相關的節點
screenX 返回當某個事件被觸發時，滑鼠指標的水平座標
screenY 返回當某個事件被觸發時，滑鼠指標的垂直座標
shiftKey 返回當事件被觸發時，"SHIFT"鍵是否被按下
initMouseEvent() 初始化滑鼠事件物件的值
initKeyboardEvent() 初始化鍵盤事件物件的值
今天,我在這裡要講的是關於鍵盤滑鼠事件的一部份應用以及程式碼案例.
首先,我要講的是關於event物件, event物件表示事件當前的狀態, 例如觸發event物件的元素後,滑鼠的位置及其狀態,或者當前按下鍵盤上的鍵位等等.需要注意的是event物件只在發生的過程中有效. event的某些屬性值對待定的事件有意義. 就像:fromElement 和toElement 屬性只對onmouseover 和 onmouseout事件有意義.下面我們從event物件常用的獲取當前滑鼠的座標值開始說, 首先我們需要知道獲取滑鼠當前座標值的事件.
clientX(獲取當前滑鼠X軸的座標值)
clientY(獲取當前滑鼠Y軸的座標值)
案例一,任意點選頁面.任意位置彈出對話方塊
程式碼如下:
<script type="text/javascript">
//文件物件模型.滑鼠單擊時,執行右邊的函式
document.onclick=function (){
//彈出對話方塊
alert('您點選了頁面！');
};
</script>在做這個例子的時候,我使用過
document.body=function (){alert('你點選了當前頁面！');};但是我發現,在瀏覽器頁面瀏覽時,我並沒有得到想要的結果. 在苦苦思索後,我找到了原因, 我通過 文件物件 的主體body 內容部分.滑鼠單擊時,彈出 對話方塊. 但是,當前情況下
我的網頁檔案內,body是沒有任何東西的,so 我的滑鼠單擊body彈出對話方塊無效,因為body內並沒有任何元素時,(除非我設定body的高度,不然body的實際預設高度是為零的),一般
body的高度是我們在主體部分寫的元素撐開的高度,而當前內容為空時,body的高度為零,所以我無論怎麼點選頁面,都不會執行我的js程式碼塊.
tagName(標籤名) <之前我們常常使用這個函式getElementsByTagName 通過標籤名獲取元素> .
隨後我做了一系列修改 然後我使用( chilaNodes )彈出document的節點.
程式碼如下:
//文件物件模型.滑鼠單擊時,執行右邊的函式
document.onclick=function (){
//彈出對話方塊
alert('您點選了頁面！');
alert(document.childNodes[0].tagName);
};需要注意的是childNodes相容性不是那麼完美,所以當下,我使用IE瀏覽器進行測試, 我們得了一個 ！ 歎號 然後我找到了網頁頁面文件 的文件型別<!DOCTYPE html> 由此可見,
我們通過document 獲取的節點是網頁節點中的第一個節點 (也是最大的節點) 然後, 我再 用alert 彈出 childNodes[1] 然後我們 看到 頁面載入完成後 , 彈出了HTML 我們再返回
網頁中檢視 節點可以看到 HTML 元素節點是除了 文件型別 ！DoCTYPE 之後的第二大 元素節點 . 從這裡我們可以看出. document 包含了最大的 節點<!DOCTYPE html>因為我
們彈出它的第一個子節點時,得到了 <!DOCTYPE html> (非普通的元素節點是文件說明 文件的型別)可以看出 , document 它是一個隱性節點 在文件的 最外面 .包含著所有的頁面
元素. 所以 我們通過document 點選頁面任意位置時 (作用域最大) 所以能實現 通過點選document 彈出對話方塊.
案例二,點選頁面任意 位置 彈出當前位置的X軸 Y軸 座標程式碼如下:
window.onload=function (){
document.onclick=function (){
//彈出當前頁面的 X軸加Y軸的滑鼠座標值
alert(event.clientX+','+event.clientY);
};
}; 但是我發現 , 這樣寫程式碼有相容性問題 IE瀏覽器能獲取 而火狐 谷歌瀏覽器 不相容 火狐和谷歌瀏覽器的核心 下面我做一個處理瀏覽器相容性 .
程式碼如下:
<span style="font-size:14px;">document.onclick=function (ev){alert(ev.clientX+','+ev.clientY);};</span>通過檢測 這段程式碼的相容性比之前好很多.相容IE9以上的IE瀏覽器 相容火狐 相容谷歌 ,IE9相容性已經很好了. 但是想完美相容IE9以下還是不行,得繼續做修改.相容性處理。
做相容處理的辦法:用if else 去判斷在哪個瀏覽器為真true (真) 如果為真,瀏覽器相容 就會執行以下程式碼塊 否則就 彈出false(假 ) 執行else 的程式碼塊 瀏覽器對此不相容
document.onclick=function (ev){
//如果滿足ev為真
if(ev){
//彈出true真！
alert(true);
}
//否則 不滿足時
else{
//彈出false 假
alert(false);
}
}; document.onclick=function (ev){
//如果滿足ev為真
if(ev){
//彈出在相容火狐谷歌瀏覽器的程式碼塊！
alert(ev.clientX+','+ev.clientY);
}
//否則 不滿足時彈出相容IE瀏覽器的程式碼塊
else{
//彈出false 假
alert(event.clientX+','+event.clientY);
}
}; //處理相容問題的第二種寫法
window.onload=function (){
document.onclick=function (ev){
//宣告一個變數 使用當相容ev(火狐、谷歌)或 event(IE)
var oEvent=ev || event;
//彈出當前程式碼塊
alert(oEvent.clientX+','+oEvent.clientY);
};
};在點選時間的無參函式中, 我們必須加上ev (相容非IE的寫法中,瀏覽器是需要向形參傳一個系統的引數過來的) ev是形參 使得當前滑鼠單擊事件成為有參函式.
！在這裡我不得不說事件冒泡(這是使用事件時尤為需要注意的事情) 以下我通過一個案例 更好的說明 什麼是冒泡事件
css部分
<style type="text/css">
div{padding: 40px; cursor: pointer;}
#box1{background: pink;}
#box2{background: plum;}
#box3{background: aqua;}
</style> <body>
<div id="box1">盒子一
<div id="box2">盒子二
<div id="box3">盒子三</div>
</div>
</div>
</body> window.onload=function (){
//宣告變數 通過標籤獲取元素
var aDiv=document.getElementsByTagName('div');
//迴圈所有的div
for(var i=0;i<aDiv.length;i++){
//當 div任意一個被點選時
aDiv[i].onclick=function(){
//彈出 當前 div的盒子內容
alert(this.innerHTML);
}
}其實,當我們點選第二個盒子就會發現,點選完畢後 彈出了兩個值 盒子二 和 盒子一 當我們點選盒子三的時候, 返回了三個值 盒子三 盒子二 盒子一 從HTML中的程式碼中我們可以
看見 ,盒子屬於層疊關係 . 大家這時候會想到 因為盒子 三 在最裡面呀 這麼彈出值, 也很正常 .(其實這就是冒泡事件！)
首先我們要理解 事件是客戶端操作進行發生的事件驅動 即某個事件被使用者 /瀏覽器觸發 從而做出相應的動作
冒泡機制 ：相信大家都見過撲通的水裡 冒泡 從最深處 慢慢的一個氣泡往水面上冒在上身的過程中 ,我們可以看到 氣泡經過不同深度層次的水 我們可以把水看成我們的文件結
構DOM樹 這麼氣泡 就相當於我們的事件 被出發後 氣泡從DOM樹的最底 層 一層一層的往上直至(水面) DOM樹的根節點.
顯而易見 (時間冒泡通常會觸發頁面內所有的事件這並不是我們想要的結果) 因此我們要禁止事件冒泡
顯示隱藏案例禁止冒泡程式碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>禁止冒泡</title>
<style type="text/css">
div{width: 100px; height: 100px; margin: 0 auto; background: aqua; border: 1px solid paleturquoise;}
</style>
<script type="text/javascript">
window.onload=function (){
var oBtn=document.getElementById('btn');
var oBox=document.getElementById('box');
oBtn.onclick=function (){
if (oBox.style.display=='none') {
oBox.style.display='block';
} else{
oBox.style.display='none';
}
};
//點選document最大的文件物件 讓盒子隱藏
document.onclick=function (){
oBox.style.display='none';
};
};
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="按鈕" />
<div id="box" class="box"></div>
</body>
</html>
以上程式碼實現了 點選按鈕實現盒子顯示, 點選盒子外任意位置 讓盒子隱藏 (但當我們 發現 點選按鈕讓盒子顯示的時候 卻發現 盒子不顯示 ) 這就是冒泡事件 通過找到input按鈕的元素節點 我們實現點選按鈕實現 div盒子的隱藏顯示 點選盒子外任意位置隱藏盒子 但是 現在程式碼不顯示是因為冒泡事件 當按鈕的單擊事件被觸發時,就像水滴有了一個氣泡,這個氣泡會一層一層往上 直至出現在水面 我們設定了通過按鈕顯示隱藏 div 通過點選document 隱藏div 按鈕點選顯示div被觸發後 冒泡事件迅速的一層一層去往上走 經過document(頁面的最大隱性節點水面)的滑鼠單擊事件時, 也順帶觸發了document的隱藏事件. (因此我們需要消除事件冒泡！)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>禁止冒泡</title>
<style type="text/css">
div{width: 100px;display: none; height: 100px; margin: 0 auto; background: aqua; border: 1px solid paleturquoise;}
</style>
<script type="text/javascript">
window.onload=function (){
var oBtn=document.getElementById('btn');
var oBox=document.getElementById('box');
oBtn.onclick=function (ev){
//相容性處理
var iEvent=ev || event;
if (oBox.style.display=='none') {
oBox.style.display='block';
} else{
oBox.style.display='none';
}
//取消冒泡事件 當事件冒泡為真的時候 取消事件冒泡
iEvent.cancelBubble=true;
};
//點選document最大的文件物件 讓盒子隱藏
document.onclick=function (){
oBox.style.display='none';
};
};
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="按鈕" />
<div id="box" class="box"></div>
</body>
</html>clientX(獲取當前滑鼠X軸的座標值)
clientY(獲取當前滑鼠Y軸的座標值)
案例程式碼如下<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div跟隨滑鼠</title>
<style type="text/css">
*{margin: 0; padding: 0;}
#box{width: 100px; height: 100px; background: aqua; position: absolute;}
</style>
<script type="text/javascript">
//文件物件 滑鼠移動事件(只要元素內移動一畫素就會觸發)
document.onmousemove=function (ev){//ev形參 ev (相容非IE的寫法中,瀏覽器是需要向形參傳一個系統的引數)
//event相容性處理 ev相容火狐 谷歌 event相容IE
var oEvent=ev||event;
//通過id找到元素盒子
var oBox=document.getElementById('box');
//盒子距離左邊的值 等於獲取當前滑鼠的X軸座標+畫素
oBox.style.left=oEvent.clientX-50+'px';
//盒子距離頭邊的值 等於獲取當前滑鼠的Y軸座標+畫素
oBox.style.top=oEvent.clientY-50+'px';
};
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div跟隨滑鼠</title>
<style type="text/css">
*{margin: 0; padding: 0;}
body{width: 2000px; height: 2000px;}
#box{width: 100px; height: 100px; background: aqua; position: absolute;}
</style>
<script type="text/javascript">
//文件物件 滑鼠移動事件(只要元素內移動一畫素就會觸發)
document.onmousemove=function (ev){//ev形參 ev (相容非IE的寫法中,瀏覽器是需要向形參傳一個系統的引數)
//event相容性處理 ev相容火狐 谷歌 event相容IE
var oEvent=ev||event;
//通過id找到元素盒子
//scrollTop 相容性處理 相容火狐 谷歌 或 相容IE
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
var oBox=document.getElementById('box');
//盒子距離左邊的值 等於獲取當前滑鼠的X軸座標+畫素
oBox.style.left=oEvent.clientX+scrollTop-50+'px';
//盒子距離頭邊的值 等於獲取當前滑鼠的Y軸座標+畫素
oBox.style.top=oEvent.clientY+scrollLeft-50+'px';
};
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div跟隨滑鼠</title>
<style type="text/css">
*{margin: 0; padding: 0;}
body{width: 2000px; height: 2000px;}
#box{width: 100px; height: 100px; background: aqua; position: absolute;}
</style>
<script type="text/javascript">
//獲取當前滑鼠的座標值
function getPos(ev){//ev形參 是下面相容處理後傳過來的<span style="font-family: Arial, Helvetica, sans-serif;"><span style="color:#ff0000;">oEvent</span></span>
<span style="white-space: pre;"> </span><span style="color:#ff0000;">var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //相容火狐谷歌 || 相容IE
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;</span>
//返回當前值
return {x: <span style="color:#ff0000;">ev</span>.clientX+scrollLeft, y: ev.clientY+scrollTop}; <span style="color:#ff0000;">//josn的寫法 儲存資料</span>
} //ev 表示傳來的形參 oEvent
document.onmousemove=function (ev){
var oEvent=ev||event;
var oBox=document.getElementById('box');
var pos=getPos(oEvent);
oBox.style.left=pos.x-50+'px';
oBox.style.top=pos.y-50+'px';
};
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
在這裡面我們用到了json
json使用語法 var json{X:2,Y:4};
迴圈只能用 for in for(var i in json){ };
彈出json的值:alert(i+'='+json.X); //寫在for in 迴圈裡面
i代表的是誰 X代表X的值 在這裡面 i 代表這 json 裡面的 X 而X則代表了X的值2.
關於json 程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//json 儲存了變數X 與 Y 之間用,逗號隔開
var json={X:88,Y:99};
for(var i in json){
//i代表了json裡面的變數 X代表了變數的值 使用for in 會依次彈出所有儲存變數的值
alert(i+','+json.X);
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
div {width:30px; height:30px; background:red; position:absolute; border-radius:50% ;}
div:nth-child(3n-1){background: palegreen;}
div:nth-child(3n-2){background: aquamarine;}
div:nth-child(3n){background: powderblue;}
</style>
<script>
function getPos(ev)
{ //相容處理 scrollTop documentElement相容火狐谷歌 ||或 body 相容IE 的scrollTop獲取
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
//返回值 陣列json的寫法 X Y在裡面是 變數 ev代表傳回的形參 oEvent oEvent.clientX+scrollLeft 滑鼠當前的視覺化介面的值加上 滾動條左邊的距離
return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}
//文件 滑鼠移動一個畫素時觸發 形參
document.onmousemove=function (ev)
{ //通過標籤獲取元素 通常使用這種方法獲取了元素後 需要使用for 迴圈遍歷到每一個標籤元素上面
var aDiv=document.getElementsByTagName('div');
//相容性處理 oEvent 賦值= ev相容火狐 谷歌|| event相容IE
var oEvent=ev||event;
//宣告pos變數 將函式獲取當前頁面視覺化 翻滾的頭部左邊的 滑鼠值返回
var pos=getPos(oEvent);
//從最後一個DIV開始循壞 當i>0迴圈到了第一個時 再i-- <逆向迴圈>
for(var i=aDiv.length-1;i>0;i--)<span style="color:#ff0000;">//當i等於零的時候就是滑鼠停止移動了</span>
{ //任意一個的div 等於 前面的一個div的距離左邊的值減一-1代表前一個
aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
}
//迴圈完上面的所有div後<從後開始迴圈到前面>但是需要第一個div特別的跟著滑鼠走
//陣列的迴圈都是從零開始 這裡下標零等於是第一個div
//第一個div距離左邊的值等於json資料體的X軸的值加畫素 下面同上
aDiv[0].style.left=pos.x+'px';
aDiv[0].style.top=pos.y+'px';
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
滑鼠事件都有個on在前面 onclick onmouseover 等等
接下的案例是利用event物件 使用鍵盤控制div移動鍵盤上每個按鍵都有一個健值,所以 通過這個健值 我們能達到通過鍵盤控制頁面的元素
鍵盤事件:onkeydown 鍵盤按下 的時候 觸發keyCode 彈出當前鍵盤 按鍵 鍵值
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>鍵盤健值</title>
<script>
//頁面文件 按鍵按下觸發事件 執行右邊的函式 ev形參
document.onkeydown=function (ev)
{ //event相容性處理 ev相容谷歌火狐 event相容IE
var oEvent=ev||event;
//彈出 返回當前值 keyCode
alert(oEvent.keyCode);
};
</script>
</head>
<body>
</body>
</html>利用鍵盤控制div的移動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鍵盤控制</title>
<style type="text/css">
#box{width: 100px; height: 100px; position: absolute; background: pink;}
</style>
<script type="text/javascript">
//網頁文件 鍵盤按下任意鍵觸發 執行右邊的函式
document.onkeydown=function (ev){
//event相容性處理 ev相容火狐 谷歌 || event相容IE
var oEvent=ev||event;
//通過ID獲得元素
var oBox=document.getElementById('box');
//判斷當返回的按鍵值是等於37時
if (oEvent.keyCode==37) {
//div盒子距離左邊的值 等於盒子距離左邊的值-100加畫素 <因為向左邊移動是負數>
oBox.style.left=oBox.offsetLeft-100+'px';
}
//當返回按下的減值是等於39時,
else if(oEvent.keyCode==39){
//讓div盒子距離左邊的值 向右移動100畫素 <向右移動是正數>
oBox.style.left=oBox.offsetLeft+100+'px';
}
//當返回的按鍵值是38時
if (oEvent.keyCode==38) {
//我們讓盒子距離上邊的距離 每次-100畫素 向上是負數
oBox.style.top=oBox.offsetTop-100+'px';
}
//當返回的按鍵值是40時 代表我們按的是下標鍵
else if(oEvent.keyCode==40){
//讓盒子距離上面的值每次加100 向下移動 是整數
oBox.style.top=oBox.offsetTop+100+'px';
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
下面是通過回車鍵提交表單裡面的留言 和通過ctrl鍵加Enter鍵提交留言
第一個通過回車提交留言
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>回車提交留言</title>
<style type="text/css">
*{margin: 0;padding: 0; font-size: 14px; color: #FF0000;}
input{display: block; margin: 0 auto; width: 400px; height: 20px; background: aquamarine; border: 1px solid orangered;}
textarea{display: block; background: #f5f5f5; margin: 0 auto; width: 400px; height: 200px;}
</style>
<script type="text/javascript">
//網頁文件內 鍵盤任意鍵按下執行 右邊的函式 ev形參 向非IE瀏覽器返回一個值
document.onkeydown=function (ev){
//相容性處理 ev相容火狐 谷歌 || event相容IE瀏覽器
var oEvent=ev||event;
//通過IE獲取元素
var oTxt=document.getElementById('txt1');
var oBox=document.getElementById('txt2');
//當鍵盤按下的值是 13時
if (oEvent.keyCode==13) {
//讓文字域的值 等於文字框的值 加換行 += 是 oBox.value=oBox.value+oTxt.value 保留原本的值加上現在提交的值
oBox.value+=oTxt.value+'\n';
//每次提交完後 清空文字框的內容
oTxt.value='';
}
};
</script>
</head>
<body>
<input type="text" name="txt1" id="txt1"/>
<textarea id="txt2"></textarea>
</body>
</html>
<script type="text/javascript">
//網頁文件內 鍵盤任意鍵按下執行 右邊的函式 ev形參 向非IE瀏覽器返回一個值
document.onkeydown=function (ev){
//相容性處理 ev相容火狐 谷歌 || event相容IE瀏覽器
var oEvent=ev||event;
//通過IE獲取元素
var oTxt=document.getElementById('txt1');
var oBox=document.getElementById('txt2');
//當鍵盤按下的值是 13時
if (oEvent.keyCode==13 && oEvent.<span style="color:#ff0000;">ctrlKey</span>) { //&&與 滿足兩邊的條件 才執行下面程式碼 ctrlKey <代表<span style="color:#3366ff;">Ctrl</span>鍵>
//讓文字域的值 等於文字框的值 加換行 += 是 oBox.value=oBox.value+oTxt.value 保留原本的值加上現在提交的值
oBox.value+=oTxt.value+'\n';
//每次提交完後 清空文字框的內容
oTxt.value='';
}
};
</script>ctrlKey、shiftKey、altKey 三個事件 ctrlKey 代表Ctrl鍵 shiftKey 代表Shift鍵 altKey 代表Alt鍵