事件的冒泡（Bubble）
指的是事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同事件也会被触发。
可用事件对象来取消冒泡，将事件对象的cancleBubble设置为true
通过事件的冒泡，可以做出让div跟随鼠标移动的效果
事件的委派
将事件统一绑定给元素共同的祖先元素（后代元素事件触发时，通过冒泡，通过祖先元素的响应函数来处理事件）
这样可以只绑定一次，即可应用到多个元素上
事件的委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
event中的target表示的触发事件的对象
使用它对触发事件的元素进行判断
事件的绑定
btn02.onclick = function() {
alert("1");
}
btn02.onclick = function() {
alert("2");
}
为元素btn02绑定多个事件时，发现会被覆盖，以上程序只能输出2
通过addEventListener()为元素绑定响应函数（IE8以下不支持）
addEventListener()的三个参数：
- 第一个参数type：事件的字符串，如onclick, 不要on；
- 第二个参数listener：回调函数，当事件被触发时会被调用；
- 第三个参数useCapture：，参数值是布尔值，默认是false。当useCapture为false时，事件处理采取事件冒泡的原则，当userCapture为true时，则采取事件捕获的原则。
var btn02 = document.getElementById("btn02");
btn02.addEventListener("click", function() {
alert("1");
}, false);
btn02.addEventListener("click", function() {
alert("2");
}, false);
此时绑定多个就不会被覆盖
即使用addEventListener()可以为一个元素的相同事件绑定多个回调函数
在IE8以下使用attachEvent()
- 第一个参数：事件的字符串，要on；
- 第二个参数：回调函数
其余与addEventListener()相同，不同的是它是后绑定先执行，执行顺序与addEventListener()相反。
所以为了兼容所有浏览器：
var btn02 = document.getElementById("btn02");
function bingding(obj, eventStr, callback) {
if (obj.addEventListener) {
obj.addEventListener(eventStr, callback, false);
} else {
//IE8以下attachEvent绑定的this是window,而addeEventListener()是obj
obj.attachEvent("on" + eventStr, function(){
callback.call(obj);
});
}
}
bingding(btn02, "click", function() {
alert("1")
});
}
注意，在修改attachEvent()的callback的this时，如果不加function，直接写callback.call，那么第三个参数依然被浏览器调用，而加function之后，可以由我们自己调用。
事件的捕获
事件的冒泡：认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播。
事件的捕获：认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素。
事件传播可以分成三个阶段
1.捕获阶段
- 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段 - 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3.冒泡阶段 - 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
IE8及以下的浏览器中没有捕获阶段
网友评论