事件

概述

JS是以事件驱动为核心的一门语言。

事件三要素

事件源（引发后续事件的标签）、事件（执行的事情）、事件处理程序（DOM操作）。

事件类型

事件名称	说明
onclick	鼠标单击
ondbclick	鼠标双击
onkeyup	按下并释放键盘上的一个键时触发
onchange	文本内容或下拉菜单中的选项发生改变
onfocus	获得焦点，表示文本框获得鼠标光标
onblur	失去焦点，表示文本框等失去鼠标光标
onmouseover	鼠标悬停。即鼠标停留在图片等的上方
onmouseout	鼠标移出，即离开图片等所在的区域
onload	window.onload是在页面所有元素（包括图片）加载完毕触发。
onunload	关闭网页时
onsubmit	表单提交事件
onreset	重置表单时

执行事件步骤

获取事件源，绑定事件，书写事件驱动程序。

事件绑定的三种方式

（1）匿名绑定，最常用：

document.getElementById('box').onclick = function () {
    //...
}

（2）函数名绑定

document.getElementById('box').onclick = fn;    //函数名称后不能加小括号

function fn() {
    //...
}

（3）行内绑定

<div id="box" onclick="fn()"></div>
<!--函数名后面必须添加小括号-->
<script>
    function fn() {
        //...
    }
</script>