js事件高级-事件对象

什么是事件对象

1、什么是事件对象？
侦听函数小括号里的就是一个事件对象，当形参来看。
例如： div.onclick = function(event){ }
event 就是一个事件对象。

2、事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数。

3、事件对象 是 事件的一系列相关数据集合。
事件对象包含的内容与事件相关，比如事件是鼠标点击的话，事件对象里就包含了鼠标的相关信息。

4、事件对象可以自己命名，比如 event、evt 、e

事件对象的常见属性方法

属性方法	说明
e.target	返回触发事件的对象（标准）
e.srcElement	返回触发事件的对象（非标准 ie6-8使用）
e.type	返回事件的类型 比如：click mouseover 不带on
e.cancelBubble	该属性阻止冒泡 非标准ie6-8使用
e.stopPropagation()	阻止冒泡 标准
e.returnValue	该属性阻止默认事件（默认行为）非标准 ie6-8使用 例如不让链接跳转
e.preventDefault()	该方法阻止默认事件（默认行为）标准 例如不让链接跳转

e.target和this的区别：
e.target 返回的是触发事件的对象
this 返回的是绑定事件的对象
例如：
这里有一个ul，里面包含三个小li
获取 var ul =document.querySelector(‘ul’);
ul.addaeventListener(‘click’, function(e){
//给ul绑定了事件，this就指向ul
console.log(this);
console.log(e.target);
})
当点击ul里的li是，this返回的是绑定事件的对象ul；而e.target 返回的是触发事件的对象li

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

if(e && e.stopPropagation){
	e.stopPropagation();
}
else{
	window.event.cancelBubble = true;
}