Javascript Event Capturing

Event Bublingin tersi. Burda dştan içe doğru event handler çalışıtırılması var.

Aşağıdaki örnekte içi içe 3 tane <div> var . Her <div> elementine addEventListener() kullanarak event handler atanıyor. Event capturing aktif hale getirmek için addEventListener() ın 3. Parametresi (phase) true olarak veriliyor. En içteki dive tıklarsak sıralama olarak ilk önce en dıştaki div in eventhandlerı aktif olacak. Sonra ikinci sonra ten içteki div.

 <style type="text/css">
        .divStyle
        {
            display: table-cell;
            border: 5px solid black;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <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].addEventListener("click", clickHandler, true);
        }

        function clickHandler()
        {
            alert(this.getAttribute("id") + "click oldu");
        }
    </script>

Event Capturing i aktif hale getirmenin tek yolu addeventListener() metodunun "phase" parametresini true olarak atmaktır. False olarak atanırsa event bubling aktif hale gelmiş olur.

Event Capturingi Pasif Hale getirmek : Event Bubing de yaptığımız gibi event.stopPropagation(); kullanmak.

Ömer Faruk Dinçer

Yorum Yaz

Sonraki Bölümler

Makale Etiketleri