事件

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间

HTML事件

语法：<tag 事件=“执行脚本”></tag>

功能：在HTML元素上绑定事件

说明：执行脚本可以是一个函数的调用

onclick触发alert函数

鼠标事件

• onload：页面加载时触发
• onclick：鼠标点击触发
• onmouseover：鼠标滑过触发
• onmouseout：鼠标离开触发
• onfoucs：获得焦点触发
• onblur：失去焦点触发
• onchange：域的内容改变时触发

在盒子中添加鼠标事件，并且通过“this”传递本盒子的id，同时可以传递多个参数，内部参数用单引号包裹

onload 加载时触发

指所有文字文件都加载完毕才触发，遇见后不直接解析而是跳过，解析完后面的才触发onload事件

此处不使用onload时：

由于代码解析顺序从上到下，所以当解析到 document.getElementById() 这句时，获取不到ID名为box的元素，所以无法触发点击事件。

这时，添加onload事件：

在整个加载完之后开始触发，这时效果无误

onfocus 获得焦点时触发

光标激活时触发

用于：

• input标签type为text、password
• textarea标签

效果如下：

光标点击输入框后弹出

onblur 失去焦点时触发

在光标离开文本框时候触发

进行判断并采取相应操作

例如：在输入错误时将内部HTML内容修改为图片的方法：

变量.tip.innerHTML="<img src=>"

onchange 域的内容改变时触发

一般作用于单选按钮，复选框，选择菜单等，在内部传送内容发生改变时触发

当下拉菜单内value值修改后触发，改变背景颜色

onsubmit 表单中确认按钮被点击触发

提交时触发，但onsubmit本身不绑定在按钮上而是表单上

onmousedown 鼠标按下时触发

当鼠标按下时触发

onmousemove 鼠标在内部移动时触发

鼠标在内部移动时触发

onmouseup 鼠标松开时触发

鼠标松开时触发

onresize 调整浏览器窗口触发

多绑定在window上，意为放大缩小浏览器窗口而不是某一元素

onscroll 拖动滚动条滚动触发

多绑定在window上，意为滚动浏览器的滚动条而不是某一元素的滚动条，也可以绑定在元素上，在设置overflow时滚动触发

键盘事件

event代表事件的状态：例如event对象的元素、鼠标的位置状态等

onkeypress 按下一个按键并释放时触发

onkeydown 按下按键时触发

onkeyup 释放按键时触发

keyCode 返回三种操作触发时相应的按键的值或代码

这里使用释放触发持续监听输入字数

DOM0级事件

1. 通过DOM获取HTML元素
2. （获取HTML元素）.事件=执行脚本

语法：ele.事件=执行脚本

功能：在DOM对象上绑定事件

说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用

举个栗子：

这里给变量inbtn设置点击时改变元素的类为unlock（即更换颜色和文本...）

点击后：

---

尝试一个可以重复点击的按钮

方法一：

判断获取元素的class是否等于CSS中所写的inclick，等于就将其class名赋值（修改样式）并给内部HTML部分赋值（修改文本）

方法二：

判断获取元素的innerHTML属性值是否等于“锁定”

需要注意的一点：如果是onclick调用一个函数，该函数不加（）直接写函数名，否则，即使未点击也会调用该函数