事件及事件对象

Posted 2020-12-08 lisalisalisa

 一、事件对象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、用文档范围级的处理器追踪事件，如果事件发生在具有特定属性的元素上——则执行该操作。