事件对象学习

一.什么是事件对象

 

官方解释: event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解∶事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

 事件对象兼容性方案

事件对象本身的获取存在兼容问题:
1.标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到。
2.在IE6~8中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找。

解决:
e = e ll window.event;

 

 二.事件对象的常用属性和方法

常见事件对象的属性和方法

 e.target和this的区别

 

e.target返回的是触发事件的对象（元素)         

this返回的是绑定事件的对象（元素)

区别：e.target点击了那个元素，就返回那个元素 this,那个元素绑定了这个点击事件，那么就返回谁

了解兼容性问题

 三.阻止默认行为

dom标准写法 ：e.preventDefault();

低版本浏览器ie678 ：returnValue属性

 四.阻止冒泡

事件冒泡∶开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点。

阻止冒泡的两种方式

1.标准写法:利用事件对象里面的stopPropagation()方法  （stop停止Propagation传播）

2.非标准写法:IE6-8利用事件对象cancelBubble属性   

e.cancelBubble = true （非标准cancel取消   bubble 泡泡)

阻止事件冒泡的兼容性解决方案

 例子：

 五.事件委托

事件委托也称为事件代理，在jQuery里面称为事件委派。

原理：

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

以上案例:给ul注册点击事件，然后利用事件对象的target 来找到当前点击的li,因为点击li，事件会冒泡到u上，u有注册事件，就会触发事件监听器。

作用：

我们只操作了一次DOM，提高了程序的性能。

例子：