20200820丁浪
js事件快速一览
事件一句话概括为：事件源上的触发器触发事件，事件响应。
鼠标事件
事件源及事件绑定
<button onclick="fun01()">点击弹出一句话</button>
事件处理
function fun01(){
alert("爸爸的爸爸是神马");
}
小注
鼠标事件触发器包括
- onclick
- onmouseover
- onmouseout
- onmousedown
- onmouseup
- onmousemove
如果给一个事件源同时添加onmousedown\onmouseup\onclick触发器，则三者发生的顺序为
onmousedown -> onmouseup -> onclick
鼠标事件的事件源包括所有在页面中有尺寸的html元素。
鼠标事件的事件响应为js函数和window对象的函数（window.alert()...）。
键盘事件
事件源及事件绑定
<body onkeydown="fun01(event)"></body>
事件处理
function fun01(event){
console.log(event.keyCode);
// 键盘按下之后会在控制台输出被按键的键码
}
小注
键盘事件的触发器一般只设置为html-body\html-form能获取到输入焦点的元素上（未经测试）。
鼠标事件包括：
- onkeydown
- onkeyup
- onkeypress
当为一个元素同时添加onkeydown\onkeypress\onkeyup触发器时，事件处理程序发生的顺序为：
onkeydown -> onkeypress -> onkeyup
表单事件
事件源及事件绑定
<form >
<input type="button" value="按钮" onfocus="fun01()">
<input type="text" placeholder="请输入..." >
</form>
<input type="button" value="" onfocus="fun01()">
事件处理
function fun01(){
var a=document.getElementsByTagName("form");
console.log(a);
console.log(a[0]);
a[0].style.backgroundColor="#f00";
}
小注
表单事件包括：
-
onfocus
获取输入焦点时触发器触发，input-button被点击时触发器被触发
-
onblur
失去焦点时触发器触发
-
onchange
控件内容改变时触发，暂时只在文本输入框和文本域中发现被触发，（button的value属性修改时，不可被触发），并且当在文本输入框中修改内容时，当输入焦点离开并且内容改变时触发。
-
onreset
重置按钮点击时被触发，该触发器仅能加在form上，不可加在form-input上，当且仅当form内部的reset按钮被点击时，触发器被触发一旦点击便触发不会管内容是否发送改变。
-
onsubmit
表单提交时发生，该触发器仅能加在form上，当提交按钮点击时发送。
-
onselect
当控件，该触发器一般被加在radio/checkbox上未测试通过！！！。
触发器见每个事件后的小注。
窗口事件
[临时插入]关于javascript脚本执行的一个细节
注意下边这段代码，alert("yes??")会执行，javascript中，除了函数需要被显式的调用之外，其他的代码会执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body></body>
</html>
<script>
alert("yes??");
</script>
事件源及事件绑定
function test01(){
alert("网页正在被加载");
}
事件处理
function test01(){
alert("网页正在被加载");
}
小注
窗口事件包括
-
onload
网页开始加载时
-
onunload未测试
网页被关闭时
触发器为body。
近期评论