1. 表单事件
事件事件句柄事件解释ChangeonChange当元素改变时执行JS代码SubmitonSubmit当表单被提交时执行JS代码ResetonReset当表单被重置时执行JS代码SelectonSelect当元素被选取时执行JS代码BluronBlur当元素失去焦点时执行JS代码FocusonFocus当元素获得焦点时执行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>
鼠标事件
事件事件句柄事件解释ClickonClick当鼠标被单击时执行JS代码DblclickonDblclick当鼠标被双击时执行JS代码MouseDownonMouseDown当鼠标按钮被按下时执行JS代码MouseMoveonMouseMove当鼠标指针移动时执行JS代码MouseOveronMouseOver当鼠标指针悬浮于某元素之上时执行JS代码MouseOutonMouseOut当鼠标移出某元素时执行JS代码MouseUponMouseUp当鼠标按钮被松开时执行JS代码<input type="button" name="click" value="鼠标单击" onclick="alert('你单击了我!')"> <input type="button" name="click" value="鼠标双击" onclick="alert('你双击了我!')">
3. 键盘事件
事件事件句柄事件解释KeyDownonKeyDown当键盘被按下时执行JS代码KeyPressonKeyPress当键盘被按下后又松开时执行JS代码KeyUponKeyUp当键盘被松开时执行JS代码
4. 窗口事件
事件事件句柄事件解释LoadonLoad当文档载入时执行JS代码UnLoadonUnload当文档卸载时执行JS代码
