本文详细介绍了网页开发中常见的事件类型及其应用场景，包括onFocus、onBlur、onChange等输入相关的事件，onClick、onMouseOver等交互事件，以及onLoad、onUnload等页面加载与卸载事件。
1. onFocus：在用户为了输入而选择select、text、textarea等时
<html>
<head>
</head>
<body>
<form name="test">
<input type="text" name="userName" value="abc" onFocus="JavaScript:alert(document.test.userName.value);">
</form>
</body>
</html>
2. onBlur：在select、text、password、textarea失去焦点时
<html>
<head>
</head>
<body>
<form name="test">
<input type="text" name="userName" value="abc" onblur="JavaScript:alert(document.test.userName.value);">
</form>
</body>
</html>
3. onChange：在select、text、textarea的值被改变且失去焦点时
<html>
<head>
</head>
<body>
<form name="test">
<input type="text" name="userName" value="abc" onChange="JavaScript:alert(document.test.userName.value);">
</form>
</body>
</html>
4. onClick：在一个对象被鼠标点中时（button,checkbox,radio,link,reset,submit,text,textarea等）
<html>
<head>
</head>
<body>
<img src="xsd.jpg" onclick="alert('ok');"></img>
</body>
</html>
5. onLoad：出现在一个文档完成对一个窗口的载入时
<html>
<head>
</head>
<body onLoad="javascript:alert('hello');" onUnload="javascript:alert('bye-bye');">
nihao
</body>
</html>
6. onUnload：当用户退出一个文档时
<html>
<head>
</head>
<body onLoad="javascript:alert('hello');" onUnload="javascript:alert('bye-bye');">
nihao
<form name="test">
<input type="text" name="t" value="hello" onSelect="javascript:alert('');">
<select name="se">
<option value="0">hehe</option>
<option value="1">hehe</option>
</select>
</form>
</body>
</html>
7. onMouseOver：鼠标被移动到一个对象上时
<html>
<head>
</head>
<body>
<img src="xsd.jpg" onmouseover="alert('over')" onmouseout="alert('out')"></img>
</body>
</html>
8. onMouseOut：鼠标从一个对象上移开时
代码同上
9. onSelect：当form对象中的内容被选中时
<html>
<head>
</head>
<body>
<form name="test">
<input type="text" name="userName" value="SXT" onSelect="JavaScript:alert(document.test.userName.value);">
</form>
</body>
</html>
10. onSubmit：出现在用户通过提交按钮提交一个表单时
<html>
<head>
<script type="text/javascript">
function check() {
if(document.test.t.value == "") {
alert("空值");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="test" action="1.htm" onsubmit="return check();">
<input type="text" name="t">
<input type="submit" value="ok">
</form>
</body>
</html>
<html><head></head><body><form name="test"><input type="text" name="userName" value="abc" onFocus="JavaScript:alert(document.test.userName.value);"></form></body></html>2. onBlur：在select、text、password、textarea失去焦点时
<html><head></head><body><form name="test"><input type="text" name="userName" value="abc" onblur="JavaScript:alert(document.test.userName.value);"></form></body></html>3. onChange：在select、text、textarea的值被改变且失去焦点时
<html><head></head><body><form name="test"><input type="text" name="userName" value="abc" onChange="JavaScript:alert(document.test.userName.value);"></form></body></html>4. onClick：在一个对象被鼠标点中时（button,checkbox,radio,link,reset,submit,text,textarea等）
<html><head></head><body><img src="xsd.jpg" onclick="alert('ok');"></img></body></html>5. onLoad：出现在一个文档完成对一个窗口的载入时
<html> <head> </head> <body onLoad="javascript:alert('hello');" onUnload="javascript:alert('bye-bye');"> nihao </body> </html>6. onUnload：当用户退出一个文档时
<html> <head> </head> <body onLoad="javascript:alert('hello');" onUnload="javascript:alert('bye-bye');"> nihao <form name="test"> <input type="text" name="t" value="hello" onSelect="javascript:alert('');"> <select name="se"> <option value="0">hehe</option> <option value="1">hehe</option> </select> </form> </body></html>7. onMouseOver：鼠标被移动到一个对象上时
<html><head></head><body><img src="xsd.jpg" onmouseover="alert('over')" onmouseout="alert('out')"></img></body></html>8. onMouseOut：鼠标从一个对象上移开时
代码同上
9. onSelect：当form对象中的内容被选中时
<html><head></head><body><form name="test"><input type="text" name="userName" value="SXT" onSelect="JavaScript:alert(document.test.userName.value);"></form></body></html>10. onSubmit：出现在用户通过提交按钮提交一个表单时
<html><head> <script type="text/javascript">
function check() {
if(document.test.t.value == "") { alert("空值"); return false; } return true; } </script></head><body><form name="test" action="1.htm" onsubmit="return check();"> <input type="text" name="t"><input type="submit" value="ok"></form></body></html>
扫一扫
1650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
