iT邦幫忙

2

JavaScript 基礎知識-事件氣泡,事件捕捉

這裡要來補充一個小知識,在 .addEventListener() 這個事件監聽的方法,還有第三個參數,只是沒有設定時,預設會是 false
即一個元素的點擊事件正常會如下:

el.addEventListener('click',function(){
    alert('Hello');
},false);

而這個第三個參數到底有什麼用途呢?
當我們今天的 HTML 架構如下:

<body class="body">
    <div class="box"></div>
</body>

然後給一下 .box 一些樣式

.box{
    width: 150px;
    height: 150px;
    background: black;
}

此時,應該會有一個黑色的正方形在頁面上
這時候來設置 .box.body 的點擊事件

var elBox = document.querySelector('.box');
elBox.addEventListener('click',function(){
    alert('box');
},false);

var elBody = document.querySelector('.body');
elBody.addEventListener('click',function(){
    alert('body');
},false);

而當我們點擊黑色正方形的時候,會發生什麼事情?
這時候會先彈跳視窗顯示 box 再彈跳視窗顯示 body

當第三個參數為 false,元素之間彼此重疊且都有設定事件時,會由指定元素往外層擴散出去
若為 true,則反之:

var elBox = document.querySelector('.box');
elBox.addEventListener('click',function(){
    alert('box');
},true);

var elBody = document.querySelector('.body');
elBody.addEventListener('click',function(){
    alert('body');
},true);

這時候反而會先彈跳視窗顯示 body 再彈跳視窗顯示 box,會由最外層的元素一層一層往內到指定的元素

而對於上述的兩種現象,分別有各自的名字
當為 false 時,叫做事件冒泡,因為就像氣泡一樣,一層一層往上擴散
當為 true 時,叫做事件捕捉,就像在一大片空地上尋找指定的獵物

目前還沒有實用到的機會,但希望這個小知識能補充給大家 /images/emoticon/emoticon01.gif

另外,如果元素彼此重疊,不想執行事件冒泡或者事件捕捉的時候,可對於事件本身下一個指令,如下:

var elBox = document.querySelector('.box');
elBox.addEventListener('click',function(e){
    e.stopPropagation();
    alert('box');
},false);

關鍵在於 function 內有帶一個 e 參數,即是指事件本身,而 .stopPropagation() 就是去停止上述的兩種現象


尚未有邦友留言

立即登入留言