1. 表单事件
事件 | 事件句柄 | 事件解释 |
Change | onChange | 当元素改变时执行JS代码 |
Submit | onSubmit | 当表单被提交时执行JS代码 |
Reset | onReset | 当表单被重置时执行JS代码 |
Select | onSelect | 当元素被选取时执行JS代码 |
Blur | onBlur | 当元素失去焦点时执行JS代码 |
Focus | onFocus | 当元素获得焦点时执行JS代码 |
- 获得焦点与失去焦点事件
当表单获得焦点时会触发focus获得焦点事件;当表单控件失去焦点时会触发blur事件。
应用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获得/失去焦点测试</title>
<script type="text/javascript">
function getFocus(){ document.bgColor="#000000"; }
function loseFocus(){ document.bgColor="#FFFFFF"; }
</script>
</head>
<body>
<form>
<br/><input type="button" onfocus="getFocus()" value="获得/失去焦点触发事件" onblur="loseFocus()" />
</form>
</body>
</html>
οnfοcus="getFocus()" value="获得/失去焦点触发事件" οnblur="loseFocus()" />
</form>
</body>
</html>
- 提交及重置事件
应用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交、重置事件的应用</title>
<script language="javascript" type="text/javascript">
function $ (id) {
return document.getElementById(id);
}
function submitTest() {
var msg = "用户名是:" + $ ("input1").value;
msg += "\n密码是:" + $ ("input2").value;
alert(msg);
return false;
}
function resetTest() { alert("将数据清空");}
</script>
</head>
<body>
<form onsubmit="return submitTest();" onreset="resetTest()">
<fieldset>
<legend>表单数据提交</legend>
<br><label>用户名:</label><input type="text" id="input1">
<br><label>密 码:</label><input type="password" id="input2">
<br><input type="submit" value="提交">
<input type="reset" value="重置">
</fieldset>
</form>
</body>
</html>
οnsubmit="return submitTest();" οnreset="resetTest()">
<fieldset>
<legend>表单数据提交</legend>
<br><label>用户名:</label><input type="text" id="input1">
<br><label>密 码:</label><input type="password" id="input2">
<br><input type="submit" value="提交">
<input type="reset" value="重置">
</fieldset>
</form>
</body>
</html>
- 改变及选择事件
<form>
<input type="text" name="" value="文本被选择后触发事件" onselect="Javascript:alert('内容已被选中!')">
</form>
οnselect="Javascript:alert('内容已被选中!')">
</form>
鼠标事件
事件 | 事件句柄 | 事件解释 |
Click | onClick | 当鼠标被单击时执行JS代码 |
Dblclick | onDblclick | 当鼠标被双击时执行JS代码 |
MouseDown | onMouseDown | 当鼠标按钮被按下时执行JS代码 |
MouseMove | onMouseMove | 当鼠标指针移动时执行JS代码 |
MouseOver | onMouseOver | 当鼠标指针悬浮于某元素之上时执行JS代码 |
MouseOut | onMouseOut | 当鼠标移出某元素时执行JS代码 |
MouseUp | onMouseUp | 当鼠标按钮被松开时执行JS代码 |
<input type="button" name="click" value="鼠标单击" onclick="alert('你单击了我!')">
<input type="button" name="click" value="鼠标双击" onclick="alert('你双击了我!')">
3. 键盘事件
事件 | 事件句柄 | 事件解释 |
KeyDown | onKeyDown | 当键盘被按下时执行JS代码 |
KeyPress | onKeyPress | 当键盘被按下后又松开时执行JS代码 |
KeyUp | onKeyUp | 当键盘被松开时执行JS代码 |
4. 窗口事件
事件 | 事件句柄 | 事件解释 |
Load | onLoad | 当文档载入时执行JS代码 |
UnLoad | onUnload | 当文档卸载时执行JS代码 |