标题
事件的概念
事件源
事件名
事件注册
事件处理
以火灾为例:
XX大酒店201房间发生火灾了,119电话报警,南湖区消防支队出警,赶往现场通过喷水作业成功灭火。
事件源:XX大酒店201房间
事件名:火灾
事件注册:实现已经规划好片区,XX大酒店所属片区归属南湖区消防支队负责
事件处理:喷水
常用的事件
鼠标常用的事件:
(1)单击事件
在这个案例中,事件源就是id为”p1”的元素,事件名是单击,事件注册
onclick = “fun()”,也就是说当单击id为“p1”的元素时,就交给fun函数来处理
(2)双击事件
(3)鼠标按下和弹起(onmousedown / onmouseup)
(4)鼠标移入和离开(onmouseenter / onmouseleave)
onmouseover onmouseout 与 onmouseenter onmouseleave
很类似,区别后面讲
(5)鼠标移动 onmousemove
(6)onmousewheel 滚轮
键盘事件
(1)Keypress
KeyCode属性记录了按下键的键码
Keypress事件只能捕获可打印字符的案件,不能捕获shift ctrl alt等等
不可打印字符的按键
但是可以使用shiftkey ctrlkey等属性判断在按键的同时是否按下了shift
ctrl 等辅助键。
(2)keydown / keyup
Keydown keyup可以捕获键盘上所有的键(个别除外)
(1)使用变量top导致上下移动失败,原因是和window.top这个全局变量冲突了,换个变 量名就好了。
(2)把变量top1 和 left移入函数中,发现只能移动5px,函数内部局部变量再每次调用函 数时都会重新创建并初始化,也就是说每一次调用left和top1的值都为0.不会保留上 一次的值。想保留,就只能使用全局变量。
其他事件
Onfocus: 获得焦点的事件
Onblur: 失去焦点的事件
Onchange: 值改变事件
事件的注册
三种方法:
(1)使用onXXX属性,比如”onclick = fun()”
(2)通过js去设置元素的onXXX属性
(3)通过addEventListener 注册
后两种办法,将页面的内容,样式和行为分离。分离之后利于分工合作
第三种方式,addEventListener第一个参数事件名,第二个参数是事件处理函数。
添加事件监听也可以移除。用的removeEventListener。
捕获与冒泡
你单击文字,先提示“段落被单击”,然后再提示“div被单击”。因为div是段落的父容器,所以单击了段落也就单击了div,两个都会触发这个事件。
如果规定两个触发的顺序,事件的冒泡和捕获
冒泡:按照从内到外依次触发,默认
捕获:反之。
使用onmouseenter事件时,里层div触发进入事件,处理完了就完事了(阻断冒泡);而你使用onmouseover事件时,里层的div触发进入事件时,处理完了还会冒泡给父容器处理进入事件。
自己去阻断冒泡,stopPropagation();