『壹』 javascript中的e是什麼意思
上面這段代碼,在 JavaScript 的事件處理中比較常見,主要是為了兼容老版本的 Internet Explorer(主要是 IE9 之前的版本)而設立的,原因是老版 IE 不支持標準的 W3C 事件處理規范。
這段代碼中的 e代表事件(event)對象,即所謂的事件驅動源。下面以滑鼠點擊事件為例,作一個測試:
(HTML)
<!DOCTYPEhtml>
<html>
<body>
<buttontype="button"id="btn">Click</button>
<scripttype="text/javascript">
//JavaScript代碼
</script>
</body>
</html>
(JavaScript)
js">document.getElementById("btn").onclick=function(e){
alert(e);
}
編寫一個匿名函數 function(e){ alert(e); },並將其賦值給事件句柄(即 onclick),這是一個回調函數,相當於 onclick(e){ alert(e); }。這段代碼在 Chrome、Firefox 或新版 IE(IE9 及以後的版本)等支持標準的瀏覽器下運行,彈出的應該是類似「[object MouseEvent]」的字元串,說明 e 為事件對象;而在老版 IE 下運行,結果就是「undefined」(未定義)。
顯而易見,在標準的流程中,事件對象默認由事件句柄函數的第一個參數傳入,供處理函數使用;在老版 IE 中,這個事件對象卻無法直接由句柄函數傳入,反而可以使用一個全局變數來代表事件對象,這個變數即 window.event。同樣,可以用例子驗證:
document.getElementById("btn").onclick=function(e){
alert(window.event);
}
在老版 IE 中即可顯示 window.event 為對象,說明可以通過這種方式取得事件對象。(其實除了 IE 外,Chrome 等瀏覽器中也存在window.event,但是在支持標準的瀏覽器中,我們最好使用標准方式。)
現在,就可以理解為什麼會出現 e=e||window.event 這種寫法了。因為只有這樣才能兼容老版 IE 的事件處理過程:如果瀏覽器支持標準的處理過程則使用句柄函數傳入的第一個參數(e),反之則使用 IE 的處理方法(window.event)。從某種意義上說,標準的事件對象(e) 和老版 IE中的 window.event 可以視為等價的(事實上有一些區別,這里就不詳細區分了),兩者任何一個有效都可以供我們使用。
document.getElementById("btn").onclick=function(e){
e=e||window.event;
//使用e對象
}
於是,上面的這段代碼就可以兼容幾乎所有的瀏覽器了。
『貳』 js圖片點擊事件
<script type="text/javascript">
function change() {
document.getElementById("img").src = "../../Styles/icons/help2.png";
}
</script>
<img id="img" onclick="change();" src="../../Styles/icons/help.png"/>
//img 本身有一個點擊事件 不需要伺服器控制項,用js就能實現了!
『叄』 javascript,滑鼠事件問題!是高手進
要知道,滑鼠移動事件是瞬時的,只要滑鼠動一動,這個事件就會觸發。所以滑鼠在Dom上移動一次,會觸發很多次滑鼠移動事件。這意味著,所謂滑鼠停止事件,就夾在兩次滑鼠移動事件的中間。何為停止?滑鼠不動是停止,但滑鼠不動是一個持續性的操作,怎麼監聽事件?
你要監聽的是滑鼠停止移動事件,也就是說想要監聽滑鼠在移動一段時間後不再移動這個事件。雖然沒有原生的事件支持,但可以通過模擬來實現這個功能。但是在模擬這個功能之前,你必須得明確,你打算怎麼定義滑鼠停止事件,前面說了,滑鼠隨便動一動就是很多個滑鼠移動事件。那最後一次滑鼠移動,距離下一次滑鼠移動,間隔多久,你會認為應該觸發滑鼠停止移動事件呢?
模擬的思路就是,每次滑鼠移動,都將這個事件觸發的時間點記錄下來,當經過一段時間,如果沒有觸發滑鼠移動,就觸發滑鼠停止移動事件。但顯然,這個事件會比較延遲。
下面假定兩次滑鼠移動間隔超過50毫秒則為停止移動,模擬代碼如下:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""
<html>
<head>
<title>NewDocument</title>
<metaname="Generator"content="EditPlus">
<metaname="Author"content="">
<metaname="Keywords"content="">
<metaname="Description"content="">
</head>
<body>
<divid="tar"style="width:300px;height:300px;background:#ddd"></div>
<scripttype="text/javascript">
//滑鼠兩次移動間隔超過50毫秒為停止移動事件觸發
varTIMEOUT_OF_STOP_MOVE=50;
window.onload=function(){
vartar=document.getElementById('tar');
//給div綁定滑鼠移動事件
tar.onmousemove=function(){
//獲取系統時間,亦為目標最新滑鼠移動事件觸發時間
varnow=newDate();
//this.lastMove==null
//表示滑鼠移動開始
//now-this.lastMove<TIMEOUT_OF_STOP_MOVE
//表示距離上次觸發滑鼠移動事件不超過TIMEOUT_OF_STOP_MOVE毫秒
if(this.lastMove==null||(now-this.lastMove<TIMEOUT_OF_STOP_MOVE)){
//更新最後移動時間
this.lastMove=now;
//終止滑鼠停止事件處理
clearTimeout(this.timer);
//重新綁定滑鼠停止事件處理
this.timer=setTimeout(function(){
alert('滑鼠停止移動了!');
//滑鼠停止移動事件處理
//...
//滑鼠停止移動事件的處理代碼就寫在這里
//...
//清除最後移動時間
this.lastMove=null;
},TIMEOUT_OF_STOP_MOVE);
}
}
}
</script>
</body>
</html>
『肆』 用js怎麼寫一個回車鍵盤事件
<script type="text/javascript" language=JavaScript charset="UTF-8">
document.onkeydown=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode==27){ // 按 Esc
//要做的事情
}
if(e && e.keyCode==113){ // 按 F2
//要做的事情
}
if(e && e.keyCode==13){ // enter 鍵
//要做的事情
}
};
</script>
Js鍵盤事件
keydown:按鍵按下
keyup:按鍵抬起
keypress:按鍵按下抬起
<body>
<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">
</body>
<script>
/*輸出輸入的字元*/
function myKeyDown(id) {
console.log(document.getElementById(id).value);
}
/*按鍵結束,字體轉換為大寫*/
function myKeyUp(id) {
var text = document.getElementById(id).value;
document.getElementById(id).value = text.toUpperCase();
}
</script>
常用的鍵盤事件對應的鍵碼:
keyCode 8 = BackSpace BackSpace
keyCode 9 = Tab Tab
keyCode 12 = Clear
keyCode 13 = Enter
keyCode 16 = Shift_L
keyCode 17 = Control_L
keyCode 18 = Alt_L
keyCode 19 = Pause
keyCode 20 = Caps_Lock
keyCode 27 = Escape Escape
『伍』 js給某個text標簽添加滑鼠的雙擊事件
js 的單雙擊事件同時存在會有一個問題:雙擊事件會同時觸發單擊事件,兩個事件存在沖突。
我們加一個延遲時間就能很好的解決這個問題。
原理: 當接收到第一個點擊時,我們先把單擊事件存儲在這個是全局變數 click_store 里,如果 0.3 秒內沒有接收到雙擊事件,就去執行它,如果接收到了,我們把它清理掉,然後去執行雙擊事件。setTimeout() 可以實現延遲執行。