绑定事件方法
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
:
页面打开时,出现九宫格蓝色色块,色块内分别是奖品,当点击开始按钮时,有一个灰色色块开始转动,点击停止按钮时,灰色按钮停在哪里,就表示所中的奖品是什么