Java Artisan / Neil Chan: Javascript Event Bubbling

2012-07-02

Javascript Event Bubbling

Javascript 的 Event 會一路往外傳，例如 click 一個 div，至少三個 DOM 物件可能收到這個 click event。

$(function(){
    $('*').click(function(e){
        $('.msg').append(e.target.tagName + '-' + e.currentTarget.tagName + '<br/>');
    });
});

<html>
<body>
<div></div>
</body>
</html>

將所有 DOM 物件註冊 click listener，若對 div 單點，則會得到以下的訊息：

DIV-DIV
DIV-BODY
DIV-HTML

jQuery 的 Event.target 表示 Event 發生物件，Event.currentTarget 表示受波及物件，從以上訊息可以知道 click event 從 div 傳給外層的 body，再傳給最外層的 document，也就是 Html tag。

2012-07-02

Javascript Event Bubbling

沒有留言:

張貼留言