学习JS中的冒泡事件

我们绑定事件的处理函数的时候，可以传递一个形参，代表我们的事件对象，一般是e或者event，系统会自动帮我们捕获事件源对象并且把事件源对象传入。

取消冒泡的方法

1.w3c标准方法：event.stopPropagation()

box1.onclick = function(e){
console.log("box1");
}
box2.onclick = function(e){
console.log("box2")
}
box3.onclick = function(e){
console.log("box3");
var e = e || window.event;
e.stopPropagation();
}
这样点击box3的时候，就只会打印box3了。但是点击其它的还会触发冒泡事件的。

IE9以及以下的版本不支持这个方法。

2.event.cancelBubble = true

这个属性是IE的，不过一些高版本的浏览器也有这个属性，只要让这个属性的值等于true，同样也可以取消事件冒泡。

封装一个兼容性的取消事件冒泡的方法：
function stopBubble(event) {
if(event.stopPropagation) {
event.stopPropagation();
}else {
event.cancelBubble = true;
}
}
当我们在浏览器中点击右键，会弹出一个菜单，这就是一个默认事件contextmenu。还有a标签，即使我们不写跳转的页面，也会自动刷新页面，这也是一个默认事件。

阻止默认事件

1.return false

我们只要在处理函数最后写上 return false就可以阻止默认事件了。
document.oncontextmenu = function () {
console.log('menu');
return false;
}

2.e.preventDefault()

documet.addEventListener('contextmenu', function (e) {
console.log('menu');
e.preventDefault();
},false);

这是w3c标准的阻止默认事件的方法。

3.e.returnValue = false

这个是IE的方法，事件源对象上的属性returnValue代表是否有默认事件，直接返回false就可以阻止默认事件了。现在高版本的浏览器也有这个属性。

document.attachEvent('oncontextmenu', function (e) {
e.returnValue = false;
});

现在我们也可以封装一个兼容性的阻止默认事件的方法了：

function cancelHandler(event) {
if(event.preventDefault) {
event.preventDefault();
}else{
event.returnValue = false;
}
}

阻止a标签不跳转：

<span style="color:#ff0000;font-weight:700;">
</span>
<span style="color:#000000;">
var a = document.links[0];
a.addEventListener('click', funciton (e) {
cancelHandler(e);
},false);
</span>

同时我们还可以用a标签的第四个用处，协议限定符来阻止默认事件。
<a href="javascript: void(0); ">www.baidu.com</a>

事件对象

在IE中，系统不会把事件对象传到方法中，因此我们的参数e或者event在IE中是不好用的，IE会把事件对象传递到window.event上，所以当我们使用事件对象的时候，就要写兼容性的写法：

var event = e || window.event;

事件委托

我们现在有一个ul，下面有十万个li，当我们给父级的ul添加第一个点击事件之后，由于事件冒泡的存在，不论我们点击哪一个li都会调用父级的点击事件处理函数，这个时候触发父级ul的点击函数的那个li就被称之为事件源对象。

event.target 是火狐的获取事件源对象

event.srcElement 是IE的获取事件源对象

chrome两种都有

因此我们在获取事件源对象的时候也需要写兼容性写法，配合刚才的事件对象的兼容性写法就是这个样子的：

event.target 是火狐的获取事件源对象

event.srcElement 是IE的获取事件源对象

chrome两种都有

因此我们在获取事件源对象的时候也需要写兼容性写法，配合刚才的事件对象的兼容性写法就是这个样子的：

oUl.addEventListener('click', function (e) {
var event = e || window.event;
var tar = event.target || event.srcElement;
console.log(tar.innerHTML);
}, false);

事件委托的优点：

1.性能不需要循环所有的子元素一个个绑定事件

2.灵活当有新的子元素被加入的时候不需要重新绑定事件

有一个关于绑定事件和闭包结合的题，是一个比较经典的题目：

var $Li = document.getElementsByTagName('li');
for (var i = 0, len = $Li.length; i < len; i++) {
(function (n) {
$Li[n].addEventListener('click', function () {
console.log(n);
},false);
} (i));