概述
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" οnclick="fn()"></div> <!--函数名后面必须添加小括号--> <script> function fn() { //... } </script>