<!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>
