Örnek üzerinde açıklamak gerekirse ;

<div class="styleClass" onclick="alert('Div click handler')">
        DIV Elementi
        <span class="styleClass" onclick="alert('Span click handler')">
        Span elementi
            <input type="button" value="Click me" onclick="alert('Button click handler')" />
        </span>
    </div>

Div var, divin içinde span, spanın içinde de buton var . Hepsinin onclick eventine de birer fonksiyon atanmış . Butona tıklayınca aslında div ve span a da tıklanmış olur . Bu yüzden bunların da onclick handlerları çalışır. İşte buna event bubling denir.

Bu olay en çok “this” anahtar sözcüğünü kullanırken sorun oluşturur. this anahtar sözcüğü hangi elementin eventi seçiliyse onu referans eder. Aşağıdaki örnek daha net açıklar.

<div id="DIV1" class="divStyle">
        DIV 1
        <div id="DIV2" class="divStyle">
            DIV 2
            <div id="DIV3" class="divStyle">
                DIV 3
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var divler = document.getElementsByTagName('div');

        for (var i = 0; i < divler.length; i++)
        {
           divler [i].onclick = function ()
            {
                this.style.borderColor = "red";
                alert(this.getAttribute("id") + " çerçeve rengi değişti");
            }
        }
    </script>

Event Bubling i önlemek için yani sadece istediğimiz elemanın eventinin gerçekleşmesini istiyorsak

Internet Explorer 8 ve öncesi versiyonları için

event.cancelBubble = true

Internet Explorer 9 (ve sonraki versiyonlar) ve diğer tarayıcılar için

event.stopPropagation();

metodları kulanılır.

yukarıdaki örnek için aşağıdaki şekilde bir kullanım bütün browserlar için event bubbling oluşmasını önleyecektir.

  for (var i = 0; i < divler.length; i++)
        {
            divler[i].onclick = function (event)
            {
                event = event || window.event;

                if (event.stopPropagation)
                {
                    event.stopPropagation();
                } else
                {
                    event.cancelBubble = true;
                }

                this.style.borderColor = "red";
                alert(this.getAttribute("id") + " çerçeve rengi değişti");
            }
        }

Ömer Faruk Dinçer