1、 事件简介:事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,avaScript 与 HTML 之间的交互是通过事件实现的。对于 Web 应用来说,有下面这些代表性的事件:单击事件、鼠标移入移出事件、键盘按下/弹起事件等等
事件就是用户与浏览器的交互行为:
- onclick 鼠标点击某个对象
- ondblclick 鼠标双击某个对象
- onerror 当加载文档或图像时发生某个错误
- onfocus 元素获得焦点
- onblur 元素失去焦点
- onkeydown 某个键盘的键被按下
- onkeypress 某个键盘的键被按下或按住
- onkeyup 某个键盘的键被松开
- onload 某个页面或图像被完成加载
- onmousedown 某个鼠标按键被按下
- onmousemove 鼠标被移动
- onmouseout 鼠标从某元素移开
- onmouseover 鼠标被移到某元素之上
- onmouseup 某个鼠标按键被松开
- onreset 重置按钮被点击
- onresize 窗口或框架被调整尺寸
- onselect 文本被选定
- onsubmit 提交按钮被点击
- onunload 用户退出页面
2、 事件对象
鼠标 / 键盘属性: - altKey 返回当事件被触发时,“ALT” 是否被按下。
- button 返回当事件被触发时,哪个鼠标按钮被点击。
- clientX 返回当事件被触发时,鼠标指针的水平坐标。
- clientY 返回当事件被触发时,鼠标指针的垂直坐标。
- ctrlKey 返回当事件被触发时,“CTRL” 键是否被按下。
- metaKey 返回当事件被触发时,“meta” 键是否被按下。
- relatedTarget 返回与事件的目标节点相关的节点。
- screenX 返回当某个事件被触发时,鼠标指针的水平坐标。
- screenY 返回当某个事件被触发时,鼠标指针的垂直坐标。
- shiftKey 返回当事件被触发时,“SHIFT” 键是否被按下。
Onmousemove:该事件将会在鼠标在元素中移动时被触发
事件对象:当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递传递进响应函数,在事件对象中封装了当前事件相关的一切信息,比如:鼠标的坐标 键盘那个按键被按下,鼠标滚轮滚动的方向
clientX 可以获取鼠标指针的水平坐标
clientY 可以获取鼠标指针的垂直坐标
鼠标从移动到矩形内开始记录每一个坐标
3、事件冒泡
所谓冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
- 在开发中大部分情况冒泡都是有用的,如果不希望冒泡发生可以通过事件对象取消冒泡 event.cancelBubble=true
4、事件的委派:指将事件统一绑定给元素共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件
事件委派是利用冒泡,通过委派可以减少事件绑定的次数,提高程序的性能
事件对象的属性target:返回触发此事件的元素(事件的目标节点)
5、 事件的绑定
语法:对象.事件=函数形式绑定事件
它只能同时为同一个元素绑定同一事件一次
不能绑定多次,如果绑定多次,后面的会覆盖掉前面的
addEventListener() - 通过这个方法也可以为元素绑定响应函数
- 参数:
1.事件的字符串,不加on
2.回调函数,当事件触发时该函数会被调用
3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false
使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数
这样当事件被触发时,响应函数将会按照函数的绑定顺序执行
这个方法不支持IE8及以下的浏览器
attachEvent() - 在IE8中可以使用attachEvent()来绑定事件
- 参数:
1.事件的字符串,要on
2.回调函数
这个方法也可以同时为一个事件绑定多个处理函数
不同的是它是后绑定先执行,执行顺序和addEventListener()相反
6、事件的传播
有三个阶段:1、捕获阶段:从最外层的祖先元素,向目标元素进行事件的捕获,默认不会触发事件
2、目标阶段:事件捕获到目标元素,捕获结束开始在目标元素上触发事件
3、冒泡阶段:事件从目标元素向他祖先元素传递,一次触发祖新元素上的事件
7、拖拽事件
拖拽流程:
- 当鼠标被拖拽元素按下时,开始拖拽 onmousedown
- 当鼠标移动时被拖拽的元素跟着鼠标移动 onmousemove
- 当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
8、键盘事件:
onkeydown: 键盘被按下事件
- 如果一直按着某个键不松开,则会一直触发该事件
- 当onkeydown事件连续触发时,第一次和第二次之间的间隔时间稍微长一点,其他则会非常快。这是为了防止误操作的发生
onkeyup: 键盘被松开的事件
键盘事件一般都会绑定给一些可以获取焦点的对象或则是document
可以通过keyCode来获取按键的编码,
通过它可以判断哪个键被按下
除了keyCode,事件对象中还提供了几个属性
altKey
ctrlKey
shiftKey
- 这三个属性分别是用来判断alt cltrl shift是否被按下的
如果被按下了则返回true,否则返回false
键盘移动事件
事件对象:
event.keyCode 37 箭头向左
event.keyCode 38 箭头向上
event.keyCode 39 箭头向右
event.keyCode 40 箭头向下