DOM事件 · 小白學電腦

## 鼠標事件 // 單擊事件 onclick() <element onclick="SomeJavaScriptCode"> object.onclick=function(){SomeJavaScriptCode}; // 雙擊事件 ondblclick() <element onclick="SomeJavaScriptCode"> object.onclick=function(){SomeJavaScriptCode}; // 右鍵菜單事件 oncontextmenu() <element oncontextmenu="myScript"> object.oncontextmenu=function(){myScript}; object.addEventListener("contextmenu", myScript); // 鼠標按下事件 onmousedown() <element onmousedown="SomeJavaScriptCode"> object.onmousedown=function(){SomeJavaScriptCode}; 提示：與 onmousedown 事件相關連得事件發生次序（鼠標左側/中間按鈕）： 1、onmousedown 2、onmouseup 3、onclick 與 onmousedown 事件相關連得事件發生次序 (鼠標右側按鈕): 1、onmousedown 2、onmouseup 3、oncontextmenu // 鼠標移入事件,不支持冒泡 onmouseenter() <element onmouseenter="myScript"> object.onmouseenter=function(){myScript}; object.addEventListener("mouseenter", myScript); // 鼠標移出事件,不支持冒泡 onmouseleave() <element onmouseleave="myScript"> object.onmouseleave=function(){myScript}; object.addEventListener("mouseleave", myScript); // 鼠標移動事件 onmousemove() <element onmousemove="SomeJavaScriptCode"> object.onmousemove=function(){SomeJavaScriptCode}; // 鼠標移入事件 onmouseover() <element onmouseover="SomeJavaScriptCode"> object.onmouseover=function(){SomeJavaScriptCode}; // 鼠標移出事件 onmouseout() <element onmouseout="SomeJavaScriptCode"> object.onmouseout=function(){SomeJavaScriptCode}; // 按鍵松開事件 onmouseup() <element onmouseup="SomeJavaScriptCode"> object.onmouseup=function(){SomeJavaScriptCode}; ## 鍵盤事件 // 鍵盤按下事件 onkeydown() <element onkeydown="SomeJavaScriptCode"> object.onkeydown=function(){SomeJavaScriptCode}; // 按下并松開事件 onkeypress() <element onkeypress="SomeJavaScriptCode"> object.onkeypress=function(){SomeJavaScriptCode}; // 按鍵松開事件 onkeyup() <element onkeyup="SomeJavaScriptCode"> object.onkeyup=function(){SomeJavaScriptCode}; 提示：與onkeyup 事件相關的事件發生次序： 1、onkeydown 2、onkeypress 3、onkeyup ## 框架/對象（Frame/Object）事件 // 離開頁面事件 onbeforeunload() <element onbeforeunload="myScript"> object.onbeforeunload=function(){myScript}; object.addEventListener("beforeunload", myScript); // 加載外部文件發生錯誤事件 onerror() <element onerror="myScript"> object.onerror=function(){myScript}; object.addEventListener("error", myScript); // 改變錨事件 onhashchange() <element onhashchange="myScript"> object.onhashchange=function(){myScript}; object.addEventListener("hashchange", myScript); // 頁面或外部資源加載事件 onload() <body onload="SomeJavaScriptCode"> window.onload=function(){SomeJavaScriptCode}; // 瀏覽頁面事件 onpageshow() <element onpageshow="myScript"> object.onpageshow=function(){myScript}; object.addEventListener("pageshow", myScript); // 尺寸事件 onresize() <element onresize="SomeJavaScriptCode"> window.onresize=function(){SomeJavaScriptCode}; // 滾動事件 onscroll() <element onscroll="myScript"> object.onscroll=function(){myScript}; object.addEventListener("scroll", myScript); // 退出頁面事件 onunload() <body onunload="SomeJavaScriptCode"> window.onunload=function(){SomeJavaScriptCode}; 注意：onunload 事件同樣觸發了頁面載入事件(+ onload 事件),不會保存在history中。 ## 表單事件 // 失焦事件 onblur() <element onblur="SomeJavaScriptCode"> object.onblur=function(){SomeJavaScriptCode}; 提示：經常用于Javascript驗證代碼