事件的介绍：
事件(Event)是JavaScript应用跳动的心脏 ，也是把所有东西粘在一起的胶水。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。我们可以理解为JS事件指在浏览器窗体或者 HTML 元素上发生的，可以触发 JS 代码块运行的行为。
窗口事件：
窗口事件主要包括load，unload，abort，error，select，resize，scroll事件。
load事件：
在 JS 中，onload 事件在页面完全加载完毕的时候触发。该事件包含所有的图形图像、外部文件（如 CSS、JS 文件等）的加载，也就是说，在页面所有内容全部加载之前，任何 DOM 操作都不会发生。为 window 对象绑定 onload 事件的方法有两种。
window.onload = f;
function f() {
alert("页面加载完毕");
}
<body onload="f()">
<script>
function f() {
alert("页面加载完毕");
}
</script>
鼠标事件：
在 JS 中，鼠标事件是 Web 开发中最常用的事件类型，鼠标事件类型详细说明如下表所示：
| 事件类型 | 说明 | | click | 单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件 | | dblclick?? | 双击鼠标左键时发生，如果右键也按下则不会发生 | | mousedown | 单击任意一个鼠标按钮时发生 | | mouseout | 鼠标指针位于某个元素上且将要移出元素的边界时发生 | | mouseover | 鼠标指针移出某个元素到另一个元素上时发生 | | mouseup | 松开任意一个鼠标按钮时发生 | | mousemove | 鼠标在某个元素上时持续发生 |
<p>鼠标事件</p>
<input type="text" id="text" />
<script>
var p1 = document.getElementsByTagName("p")[0]; //获取段落文本的引用指针
var t = document.getElementById("text"); //获取文本框的指针引用
function f () { //事件侦测函数
var event = event || window.event; //标准化事件对象
t.value = (event.type); //获取当前事件类型
}
p1.onmouseover = f; //注册鼠标经过时事件处理函数
p1.onmouseout = f; //注册鼠标移开时事件处理函数
p1.onmousedown = f; //注册鼠标按下时事件处理函数
p1.onmouseup = f; //注册鼠标松开时事件处理函数
p1.onmousemove = f; //注册鼠标移动时事件处理函数
p1.onclick = f; //注册鼠标单击时事件处理函数
p1.ondblclick = f; //注册鼠标双击时事件处理函数
</script>
|