事件及事件对象
Posted lisalisalisa
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件及事件对象相关的知识,希望对你有一定的参考价值。
一、事件对象event
事件触发会生成事件对象event,event对象是跟事件相关的数据集合,比如点击事件中触发事件的元素、鼠标的位值等。input输入事件中用户按下了哪个键等。
事件对象中常用的属性
1、event.type
事件类型
2、event.target
触发事件的目标元素,IE< 8不可用
3、event.srcElement
触发事件的目标元素,IE < 8 专用
4、event.currentTarget
绑定事件的目标元素,IE < 8不可用,相当于绑定的事件处理函数中的this
5、event.pageX/Y
触发事件时,鼠标距离页面的上左边距,IE < 9不可用
6、event.clientX/Y
触发事件时,鼠标距离页面可视区域的上左边距
7、event.screenX/Y
触发事件时鼠标距离屏幕的上左边距
8、event.offsetX/Y
触发事件时鼠标距离触发事件的元素的内填充边(padding edge)在X/Y轴的偏移量。
9、event.key/keuCode
键盘事件中键盘的按键和按键的ASCII值
10、获取鼠标相对于绑定事件的元素的位置
e.pageX/Y - 绑定事件的元素距离页面的左/上边距(offsetLeft/offsetTop)
二、阻止冒泡、默认事件 (存在兼容性问题)
1、阻止冒泡
event.stopPropagation();
event.cancelBubble = true;IE < 10已废弃,慎用event
兼容写法:
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
2、阻止默认
event.preventDefault();
event.returnValue = false IE< 9,即将被废弃,慎用
兼容写法:
event.preventDefault ? event.preventDefault() : event.returnValue = false
event.defaultPrevented返回一个布尔值,表明当前事件是否调用了event.preventDefault()方法,如果默认动作被阻止,那么event.defaultPrevented属性为true,否则为false,IE9以上可用此属性。
三、键盘事件
keyup 键盘抬起事件
keydown 键盘按下的事件,按着不松会一直触发
keypress和keydown一样,不同的是获取的按键的ASCII值是区分大小写的,另外无法识别功能键。
四、复制黏贴事件
oncut 剪切事件
oncopy 复制事件
onpaste 黏贴事件
五、事件委托
通过监听一个父元素,来给不同的子元素绑定事件,减少监听次数,从而提升速度。由于事件的冒泡机制, 可以使用事件委托的方式给元素添加事件,多用于ul的监听事件更改li的情景。
closest
ele.closest()方法用来获取,匹配特定选择器且离当前元素最近的祖先元素(也可以是当前元素本身)。如果匹配不到,则返回null。换句话说,方法closet在 元素中检查每个父类,如果与选择器匹配,则停止搜索,并返回祖先,IE不支持此方法。
语法:var ele = element.closet(selectors);
六、“行为型”模式
我们还可以使用事件委托声明式的通过特定属性和类为元素添加“行为”。
模式分为两步:
1、我们向元素添加一个特殊属性
2、用文档范围级的处理器追踪事件,如果事件发生在具有特定属性的元素上——则执行该操作。
以上是关于事件及事件对象的主要内容,如果未能解决你的问题,请参考以下文章
web前端练习28----Dom4,事件(事件对象,事件冒泡,事件委派,事件传播,事件绑定,事件移除及案例练习)