事件是什么?
事件是指,javascript與文檔或瀏覽器發生特定交互的瞬間。
事件分為三個階段執行:
事件捕獲階段;
處理目標階段;
事件冒泡階段;
注意:IE下沒有事件捕獲階段,只有處理目標和事件冒泡階段
event對象 代表當前事件的狀態,例如觸發event對象的元素、鼠標位置及狀態、
按下的按鍵等等。
什么是冒泡,捕獲型事件是自上而下,而冒泡型事件是自下而上的,舉個例子
css部分:
<style type="text/css">
#box1 {
width: 300px;
height: 300px;
background-color: red;
}
#box2 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
html部分:
<div id="box1">
<div id="box2"></div>
</div>
js部分:
document.getElementById("box2").onclick = function() {
alert("我是box2");
}
document.getElementById("box1").onclick = function() {
alert("我是box1");
}
document.body.onclick = function() {
alert("我是body");
}
上面的代碼大家可以自己去執行以下,我們發現,當點擊box2時,不只會彈出“我是box2”,還會繼續彈出“我是box1”及“我是body”,這就是事件產生了冒泡,很明顯,我們并不希望這樣的事情發生,所以,我們需要阻止事件冒泡。
這里就不過多贅述,直接上代碼,我們需要用event來監聽事件
這里的e,就是監聽事件的形參,為了讓大家看的更明白,我用上面的例子來做演示
if(e.stopPropagation()) {
//非IE的
e.stopPropagation();
} else {
//IE阻止冒泡
e.cancelBubble();
}
document.getElementById("box2").onclick = function(e) {
//獲取event對象
var e = e || window.event;
alert("我是box2");
// 阻止冒泡
if(e.stopPropagation()) {
//非IE的
e.stopPropagation();
} else {
//IE阻止冒泡
e.cancelBubble();
}
}
此時,阻止了事件冒泡,再點擊box2時,就只會彈出“我是box2”。