绑定事件方法
1、btn.οnclick=function(){
alert(" 我是第一种绑定事件的方法 ");
}
2、addEventListener：可以 绑定多种事件，不会覆盖绑定事件
btn.addEventListener("click",function(){
alert(" 我是第二种绑定事件的方法 ");
},false)
3、function clickFn(){
alert(" 我是第三种绑定事件的方法 ");
}
举例：
练习 2 ：
在页面中制作一个 8 秒倒计时效果，当点击开始按钮时，开始倒计时，点击停止按钮时，在页面中弹出 “ 倒计时 over”
鼠标事件
由鼠标或类似用户动作触发的事件
事件名 描述
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动 （在borser上也可以用）
onmouseup 某个鼠标按键被松开
表单事件
由 HTML 表单内的动作触发的事件
事件名 描述
onfocus 元素获得焦点 点击后 离开再点击触发
onblur 元素失去焦点 点击后 失去
onchange 用户改变域的内容 文本框内容被改变了，才会被触发 （select option框使用较多，和value值没有关系，受下拉列表的选项影响）
注意：表单重置事件不支持 input 标签，支持 form 标签
键盘事件
onreset 表单重置时触发
onsubmit 表单提交时触发
键盘事件 就是对键盘操作触发的事件
事件名 描述
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下并释放一个键时发生(还没有完全松开)
onkeyup 某个键盘的键被松开
oninput 用户输入的时候触发 使用较多
提示：键盘事件的事件次序： onkeydown onkeypress onkeyup
在Bom中window最大
在Dom中document最大
UI 事件
UI （ User Interface ，用户界面）事件
指的是那些不一定与用户操作有关的事件
事件名 描述
都是window下面的
onload 某个页面或图像被完成加载
onresize 窗口或框架被调整尺寸
onscroll 当文档被滚动时发生的事件
提示：如果重载页面，也会触发 unload 事件（以及 onload 事件）
练习 1 ：
页面打开时，文本框内默认为 my name is tom ，当光标聚焦到文本框时，默认文本 my name is tom 消失，文本框后面出现 “ 用户名不能为空 ” 的用户名输入需求，且输入的用户名字体颜色为蓝色
练习 2 ：
页面打开时，出现九宫格蓝色色块，色块内分别是奖品，当点击开始按钮时，有一个灰色色块开始转动，点击停止按钮时，灰色按钮停在哪里，就表示所中的奖品是什么
