javascript学习笔记--一些常见的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascriptEvent</title> </head> <!-- onload 一张页面完成加载。 --> <!-- onpageshow 该事件在用户访问页面时触发 --> <!-- onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发 --> <!-- onunload 用户退出页面。 --> <body onload="onloadEvent()"> <!-- 鼠标事件 --> <div style="display: block;margin:100px;"> <!-- onclick 当用户点击某个对象时调用的事件句柄。 --> <div onclick="onclickEvent()">普通点击事件</div> <!-- oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发 --> <div oncontextmenu="oncontextmenuEvent()" >右键打开菜单事件</div> <!-- ondblclick 当用户双击某个对象时调用的事件句柄。 --> <div ondblclick="ondblclickEvent()">双击对象事件</div> <!-- onmousedown 鼠标按钮被按下。 --> <div onmousedown="onmousedownEvent()">鼠标按下事件</div> <!-- onmouseenter 当鼠标指针移动到元素上时触发。 --> <div onmouseenter="onmouseenterEvent()">鼠标移动到元素上事件</div> <!-- onmouseleave 当鼠标指针移出元素时触发 --> <div onmouseleave="onmouseleaveEvent()">指针移动到元素事件</div> <!-- onmousemove 鼠标被移动。 --> <div onmousemove="onmousemoveEvent()">鼠标被移动事件</div> <!-- onmouseover 鼠标移到某元素之上。 --> <div onmouseover="onmouseroverEvent()">鼠标移动到某元素事件</div> <!-- onmouseout 鼠标从某元素移开。 --> <div onmouseout="onmouseoutEvent()">鼠标从某元素移开事件</div> <!-- onmouseup 鼠标按键被松开。 --> <div onmouseup="onmouseupEvent()">鼠标按键被松开事件</div> </div> <!-- 键盘事件 --> <!-- onkeydown 某个键盘按键被按下。 --> <input type="text" name="text1" onkeydown="onkeydownEvent()">键盘按下事件 <!-- onkeypress 某个键盘按键被按下并松开。 --> <input type="text" name="text1" onkeypress="onkeypressEvent()">键盘按下松开事件 <!-- onkeyup 某个键盘按键被松开。 --> <input type="text" name="text1" onkeyup="onkeyupEvent()">键盘松开事件 <!-- 表单事件 --> <!-- onblur 元素失去焦点时触发 --> <input type="text" name="onblur" onblur="onblurEvent()"> <!-- onchange 该事件在表单元素的内容改变时触发(input, keygen,select,textarea --> <input type="text" name="onchange" onchange="onchangeEvent()"> <!-- onfocus 元素获取焦点时触发 --> <input type="text" name="onfocus" onfocus="onfocusEvent()"> <!-- onfocusin 元素即将获取焦点时触发 --> <input type="text" name="onfocusin" onfocusin="onfocusinEvent()"> <!-- onfocusout 元素即将失去焦点时触发 --> <input type="text" name="onfocusout" onfocusout="onfocusoutEvent()"> <!-- oninput 元素获取用户输入时触发 --> <input type="text" name="oninput" oninput="oninputEvent()"> <!-- onreset 表单重置时触发 --> <form action="demo.php" onreset="onresetEvent()"> <input type="reset" name="reset" value="重置"> </form> <!-- onsearch 用户向搜索域输入文本时触发 --> <input type="search" name="onsearch" onsearch="onsearchEvent()"> <!-- onselect 用户选取文本时触发 --> <input type="search" name="onselect" onselect="onselectEvent()"> <!-- onsubmit 表单提交时触发 --> <form action="demo.php" onsubmit="onsubmitEvent()"> <input type="submit" name="submit"> </form> <script type="text/javascript"> function onclickEvent(){alert('普通点击事件');} function oncontextmenuEvent(){alert('右键打开菜单事件');} function ondblclickEvent(){alert('双击对象事件');} function onmousedownEvent(){alert('鼠标按下事件');} function onmouseenterEvent(){alert('鼠标移动到元素上事件');} function onmouseleaveEvent(){alert('指针移动到元素事件');} function onmousemoveEvent(){alert('鼠标被移动事件');} function onmouseroverEvent(){alert('鼠标移动到某元素事件');} function onmouseoutEvent(){alert('鼠标从某元素移开事件');} function onmouseupEvent(){alert('鼠标按键被松开事件');} function onkeydownEvent(){alert('键盘按下事件');} function onkeypressEvent(){alert('键盘按下松开事件');} function onkeyupEvent(){alert('键盘松开事件');} function onloadEvent(){alert('页面加载完成事件');} function onblurEvent(){alert('元素失去焦点时触发');} function onchangeEvent(){alert('该事件在表单元素的内容改变时触发');} function onfocusEvent(){alert('元素获取焦点时触发');} function onfocusinEvent(){alert('元素即将获取焦点时触发');} function onfocusoutEvent(){alert('元素即将失去焦点时触发');} function oninputEvent(){alert('元素获取用户输入时触发');} function onresetEvent(){alert('表单重置时触发');} function onsearchEvent(){alert('用户向搜索域输入文本时触发');} function onselectEvent(){alert('用户选取文本时触发');} function onsubmitEvent(){alert('表单提交时触发');} </script> </body> </html>