Olay köpüren ve yakalama arasındaki fark nedir? Bu iki kişiden hangisini kullanmak daha hızlı ve daha iyi bir model mi?

Olay köpüren ve yakalayan bir olay başka bir öğe içinde bir öğe oluştuğunda HTML DOM API, olay çoğaltmanın iki yolu vardır, ve her iki element bir olay için tanıtıcı kayıtlı. Olay yayılımı modu which order the elements receive the event belirler.

Köpürme, bu olay ilk ve en içteki elemanı tarafından yakalanan işlenmiş ve daha sonra dış unsurların yayılır.

Yakalama ile olay ilk dış unsur tarafından yakalanır ve iç unsurların yayılır.

Yakalamak da denir "yayılma sırasını hatırlamak yardımcı olur:",. kanama

kabarcık Yukarı, Aşağı damlama

Eski günlerde, Netscape, Microsoft olay köpürme terfi ederken olay yakalama savundu. Hem W3C Document Object Model Events standart bir parçası (2000).

YANİ < 9 9 kullanır ve tüm büyük tarayıcılar ise* *22, hem de destek.

addEventListener(type, listener, useCapture) (varsayılan) ya da köpürme veya yakalama modunda için olay işleyicileri kayıt için kullanabiliriz. Yakalama modeli kullanmak için geçiş true üçüncü argüman.

Sadece köpürme model tüm büyük tarayıcılar tarafından desteklenir. Eğer olay zaten yakalama kullanmak için gidiyoruz eğer, olay köpürme işlemek için IE için gereken. Bu daha geniş tarayıcı uyumluluğu sağladığı kolay kullanım köpürme olayı yapar. Öte yandan, 23* *karmaşık DOMs için.

Örnek

<div>
    <ul>
        <li></li>
    </ul>
</div>

Yapısı yukarıda tıklayın bir olay li eleman oluştuğunu varsayalım.

Yakalama modeli, olay olacak idare tarafından div ilk (tıklatın olay işleyicileri div yangın ilk), sonra ul, o zaman en son hedef öğe li.

Köpüren modeli, tam tersi olacak: olay ilk ul div öğe tarafından son. ** * * 14, daha sonra ele alınacaktır

Daha fazla bilgi için, bkz

• QuirksMode Event Order
• MDN addEventListener
• QuirksMode Events Advanced

Vurgulanan öğelerden birini tıklayın eğer bu örnekte, olay yayma akışının yakalama aşaması ilk, köpürme aşaması izler oluşur.

var divs = document.getElementsByTagName('div');

function capture() {
    log('capture: '   this.firstChild.nodeValue.trim())
}

function bubble() {
    log('bubble: '   this.firstChild.nodeValue.trim())
}

for (var i = 0; i < divs.length; i  ) {
    divs[i].addEventListener('click', capture, true);
    divs[i].addEventListener('click', bubble, false);
}

var $log = $('#log');

function log(msg) {
    $log.append('<p>'   msg   '</p>');
}

div {
    border: 1px solid red;
    padding: 5px;
    min-height: 10px;
}

<script src="http://code.jquery.com/jquery.min.js"></script>
<div>1
    <div>2
        <div>3
            <div>4
                <div>5</div>
            </div>
        </div>
    </div>
</div>
<section id="log"></section>

Another example at JSFiddle.