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验证代码