HTML DOM 入门 3：事件与输入
程序员文章站
2022-06-06 19:55:05
...
可以利用事件来实现对HTML的监控（在功能上，也就是实现各式的输入功能）
1.鼠标事件：点击、双击、按下、弹起、经过、进入、退出组件
onmousedown：按下
onmouseup：弹起
onmousemove：经过（每次终点在组件上的鼠标移动，都会触发一次事件）
onmouseover：从组件外进入组件
onmouseout：从组件中退出
onclick:在组件上点击
ondblclick:在组件上双击
//一个按钮，按下将触发f1(),弹起将触发f2()
<input type="button" onmousedown="f1()" onmouseup="f2()" >
//也可以用this来将组件对象作为参数传递到函数中
<input type="button" onclick="f3(this)">
2.键盘事件
onkeydown:键盘按下
onkeyup:键盘弹起
onkeypress：按下并弹起
键盘事件可以监控输入了哪个键
//一个button 如果在上面按下键盘按键并弹起，将会触发f(event),其中event就是传递的参数，用于识别按了哪一个键
<input type="button" onkeypress="f(event)" >
function f(e){//带参数的函数
e.keyCode;//返回按下按键的键盘keyCode(如d的keyCode为100)
e.shiftKey;//不过不能监视shift 要用shiftKey来监视shift摁键。如果摁下shift则返回1
}
3.输入框焦点事件
//属性onfoucs和onblur 代表获取焦点和失去焦点。
<input type="text" onfocus="f1()" onblur="f2()" id="input1" >
4.变化事件
//输入框在丢失焦点的时候，如果它的值（在这个例子里也就是输入的文本）发生了改变，那么会触发onchange
<input type="text" onchange="f1()" id="input1" >
//在函数内可以配合value来实现监控值的变化的结果
f1(){
//do Something with a.value } //假设已经得到了输入框所对应的对象a
}
5.表单提交事件
<form action="/aaa.jsp" onsubmit="f1()">
//输入框的类型为submit，代表这是一个提交框，显示的文本为"提交按钮"
<input type="submit" value="提交按钮">
//点击“提交”，会触发action的jsp文件，同时，也会触发login()
</form>
6.加载
//加载图片/文档成功后会触发f()
<img onload="f()" src="www.xxx.com/.png">
<body onload="f()"></body>
7.阻止事件发生
通过函数中的return false()来阻止事件发生