DOM Etkinliği yetkisi nedir?

Lütfen JavaScript'teki etkinlik temsilciliğini açıklayabilir ve ne kadar yararlıdır?

DOM olay yetkisi, ui-olaylarına, "köpürme" olayının büyüsü (diğer bir deyişle olay yayılımı) yoluyla her çocuktan ziyade tek bir ortak ebeveyn aracılığıyla yanıt verme mekanizmasıdır.

Bir öğe üzerinde bir olay tetiklendiğinde aşağıdakiler gerçekleşir :

Olay hedefine gönderilir EventTargetve orada bulunan olay dinleyicileri tetiklenir. Daha sonra, köpüren olaylar, EventTargetüst zincirini yukarı doğru takip ederek bulunan her türlü ek olay dinleyicisini tetikler ve birbirini izleyen her EventTarget'a kaydedilen olay dinleyicilerini kontrol eder. Bu yukarı doğru yayılım Document,.

Olay köpürme, tarayıcılarda olay yetkisi için temel oluşturur. Artık bir olay işleyiciyi tek bir üst öğeye bağlayabilirsiniz ve bu işleyici, olay alt düğümlerinden herhangi birinde (ve bunların alt öğelerinden herhangi birinde) gerçekleştiğinde yürütülür . Bu olay delegasyonu. Uygulamada bunun bir örneği:

<ul onclick="alert(event.type + '!')">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

Bu örnekte, alt <li>düğümlerden herhangi birine tıklayacak olsaydınız, tıklattığınız herhangi bir "click!"tıklama işleyicisi olmasa bile bir uyarı görürsünüz <li>. Eğer onclick="..."her birine bağlanırsak <li>aynı etkiyi elde edersiniz.

Peki faydası nedir?

Artık <li>DOM manipülasyonu ile yukarıdaki listeye dinamik olarak yeni öğeler eklemeniz gerektiğini düşünün :

var newLi = document.createElement('li');
newLi.innerHTML = 'Four';
myUL.appendChild(newLi);

Olmadan sen olurdu olay yetkisinin kullanılmasına "rebind" "onclick"yeniye olay işleyicisi <li>onun kardeşleri ile aynı şekilde hareket etmek için sırayla, eleman. İle olay heyeti bir şey yapmanız gerekmez. Sadece yeniyi <li>listeye ekleyin ve işiniz bitti.

Bu, DOM'da yeni öğelerin dinamik olarak oluşturulduğu ve / veya kaldırıldığı birçok öğeye bağlı olay işleyicileri olan web uygulamaları için kesinlikle harika. Olay yetkilendirmesi ile olay bağlamalarının sayısı, ortak bir ana öğeye taşınarak önemli ölçüde azaltılabilir ve anında dinamik olarak yeni öğeler oluşturan kod, olay işleyicilerini bağlama mantığından ayrılabilir.

Olay temsilcisinin bir diğer yararı da olay dinleyicileri tarafından kullanılan toplam bellek izinin azalmasıdır (olay bağlamalarının sayısı azaldığından). Sık sık boşaltılan küçük sayfalarda (örneğin kullanıcının farklı sayfalara sık sık gitmesi) fazla bir fark olmayabilir. Ancak uzun ömürlü uygulamalar için önemli olabilir. DOM'dan kaldırılan öğelerin hala bellek talep ettiği (yani sızıntı yaptığı) ve izlenmesi gereken bu bellek genellikle bir olay bağlamaya bağlı olduğunda izlenmesi gerçekten zor bazı durumlar vardır. Etkinlik heyetiyle, olay dinleyicilerini "dinlemeyi" unutma riski olmadan alt öğeleri yok etmekte özgürsünüz (dinleyici atada olduğu için). Bu tür bellek sızıntıları daha sonra (bazen ortadan kaldırılması zor olan, elimine edilmemişse. IE size bakıyorum) içerilebilir.

Olay heyetinin bazı daha iyi somut kod örnekleri:

• JavaScript Etkinlik Temsilcisi Nasıl Çalışır?
• Olay Temsilcisi ve Olay İşleme
• jQuery.delegate olay yetkisi + seçici belirtimidir
• jQuery.on , seçiciyi 2. parametre olarak geçtiğinde olay yetkisi kullanır
• JavaScript kitaplığı olmayan olay yetkisi verme
• Olay heyeti vs Closures : artıları bir görünüm alır değil kullanım olay heyeti dönüştürme kodu
• İçin ortaya çıkarılan ilginç bir yaklaşım PPK devrederek focusve blurolayları (do not baloncuk)

Olay yetkilendirmesi, belirli düğümlere olay dinleyicileri eklemekten kaçınmanıza olanak tanır; bunun yerine olay dinleyicisi bir ebeveyne eklenir. Bu olay dinleyicisi köpüren olayları analiz ederek alt öğelerle eşleşir.

JavaScript Örneği:

Birkaç alt öğeye sahip bir üst UL öğemiz olduğunu varsayalım:

<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>

Ayrıca, her bir alt öğe tıklandığında bir şeyin olması gerektiğini söyleyelim. Her bir LI öğesine ayrı bir olay dinleyicisi ekleyebilirsiniz, ancak LI öğeleri listeye sık sık eklenir ve listeden kaldırılırsa ne olur? Olay dinleyicileri eklemek ve kaldırmak, özellikle ekleme ve kaldırma kodu uygulamanızın farklı yerlerinde ise bir kabus olur. En iyi çözüm, üst UL öğesine bir olay dinleyicisi eklemektir. Ancak olay dinleyicisini üst öğeye eklerseniz, hangi öğenin tıklandığını nasıl bileceksiniz?

Basit: Olay UL öğesine köpürdüğünde, gerçek tıklatılan düğüme başvuru elde etmek için olay nesnesinin target özelliğini kontrol edersiniz. Etkinlik temsilcisini gösteren çok temel bir JavaScript snippet'i:

// Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click", function(e) {
// e.target is the clicked element!
// If it was a list item
if(e.target && e.target.nodeName == "LI") {
    // List item found!  Output the ID!
    console.log("List item ", e.target.id.replace("post-"), " was clicked!");
       }
 });

Üst öğeye bir tıklama olay dinleyicisi ekleyerek başlayın. Olay dinleyicisi tetiklendiğinde, tepki verilecek öğe türü olduğundan emin olmak için olay öğesini kontrol edin. Bir LI elementiyse, bom: ihtiyacımız olan şey bizde! İstediğimiz bir öğe değilse, etkinlik yok sayılabilir. Bu örnek oldukça basittir - UL ve LI basit bir karşılaştırmadır. Daha zor bir şey deneyelim. Pek çok çocuklu bir ebeveyn DIV yapalım, ancak tek düşündüğümüz classA CSS sınıfına sahip bir A etiketi:

  // Get the parent DIV, add click listener...
  document.getElementById("myDiv").addEventListener("click",function(e) {
// e.target was the clicked element
if(e.target && e.target.nodeName == "A") {
    // Get the CSS classes
    var classes = e.target.className.split(" ");
    // Search for the CSS class!
    if(classes) {
        // For every CSS class the element has...
        for(var x = 0; x < classes.length; x++) {
            // If it has the CSS class we want...
            if(classes[x] == "classA") {
                // Bingo!
                console.log("Anchor element clicked!");
                // Now do something here....
            }
        }
    }

  }
});

http://davidwalsh.name/event-delegate

dom event delegation bilgisayar bilimi tanımından farklı bir şeydir.

Bu, köpürtme olaylarını tablo hücreleri gibi birçok öğeden, tablo gibi bir üst nesneden işlemeyi ifade eder. Özellikle öğe eklerken veya çıkarırken kodu daha basit tutabilir ve biraz bellek tasarrufu sağlar.

Temsilci seçme , bir nesnenin dışarıya belirli bir davranışı ifade ettiği ancak gerçekte bu davranışı ilişkili bir nesneye uygulama sorumluluğunu devrettiği bir tekniktir. Bu ilk başta proxy kalıbına çok benziyor, ancak çok farklı bir amaca hizmet ediyor. Temsilci seçme, nesne (yöntem) davranışını merkezileştiren bir soyutlama mekanizmasıdır.

Genel olarak konuşulursa: mirasa alternatif olarak delegasyonu kullanın. Kalıtım, ebeveyn ve alt nesne arasında yakın bir ilişki olduğunda iyi bir stratejidir, ancak kalıtım nesneleri çok yakından birleştirir. Delegasyon genellikle sınıflar arasındaki ilişkiyi ifade etmenin daha esnek bir yoludur.

Bu kalıp "proxy zincirleri" olarak da bilinir. Diğer birkaç tasarım modeli de yetkiyi kullanır - Devlet, Strateji ve Ziyaretçi Paternleri buna bağlıdır.

Heyet kavramı

Bir ebeveynin içinde çok sayıda öğe varsa ve bunların üzerindeki olayları işlemek istiyorsanız - her öğeye işleyicileri bağlamayın. Bunun yerine, tek işleyiciyi ebeveynlerine bağlayın ve çocuğu event.target öğesinden alın. Bu site, etkinlik temsilcisinin nasıl uygulanacağı hakkında yararlı bilgiler sağlar. http://javascript.info/tutorial/event-delegation

Olay yetkilendirmesi, bir kapsayıcı öğesinde bir olay işleyicisi kullanarak baloncuk oluşturan bir olayı yönetiyor, ancak olay işleyicisinin davranışını yalnızca olay, kapsayıcıdaki belirli bir koşulla eşleşen bir öğede gerçekleştiğinde etkinleştiriyor. Bu, kap içindeki öğelerdeki olayların işlenmesini basitleştirebilir.

Örneğin, büyük bir tablodaki herhangi bir tablo hücresindeki tıklamayı işlemek istediğinizi varsayalım. Sen olabilir her hücreye bir tık işleyicisi kanca bir döngü yazma ... ya da masa başlıklarını veya a dahilinde boşluk sadece tablo hücreleri için onu tetiklemek için masa ve kullanım olay heyeti yapılan bir tıklama işleyicisi kanca (ve olamazdı hücrelerin etrafında sıra vb.).

Kapsayıcıya öğe ekleyip çıkaracağınız zaman da kullanışlıdır, çünkü bu öğelere olay işleyicileri ekleme ve kaldırma konusunda endişelenmenize gerek yoktur; sadece olayı kabın üzerine asın ve olayı havaya uçururken ele alın.

İşte basit bir örnek (satır içi açıklamaya izin vermek kasıtlı olarak ayrıntılıdır): tdKapsayıcı tablosundaki herhangi bir öğeye tıklamayı işleme :

// Handle the event on the container
document.getElementById("container").addEventListener("click", function(event) {
    // Find out if the event targeted or bubbled through a `td` en route to this container element
    var element = event.target;
    var target;
    while (element && !target) {
        if (element.matches("td")) {
            // Found a `td` within the container!
            target = element;
        } else {
            // Not found
            if (element === this) {
                // We've reached the container, stop
                element = null;
            } else {
                // Go to the next parent in the ancestry
                element = element.parentNode;
            }
        }
    }
    if (target) {
        console.log("You clicked a td: " + target.textContent);
    } else {
        console.log("That wasn't a td in the container table");
    }
});

table {
    border-collapse: collapse;
    border: 1px solid #ddd;
}
th, td {
    padding: 4px;
    border: 1px solid #ddd;
    font-weight: normal;
}
th.rowheader {
    text-align: left;
}
td {
    cursor: pointer;
}

<table id="container">
    <thead>
        <tr>
            <th>Language</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="rowheader">English</th>
            <td>one</td>
            <td>two</td>
            <td>three</td>
        </tr>
        <tr>
            <th class="rowheader">Español</th>
            <td>uno</td>
            <td>dos</td>
            <td>tres</td>
        </tr>
        <tr>
            <th class="rowheader">Italiano</th>
            <td>uno</td>
            <td>due</td>
            <td>tre</td>
        </tr>
    </tbody>
</table>

Bunun ayrıntılarına girmeden önce, DOM etkinliklerinin nasıl çalıştığını kendimize hatırlatalım.

DOM olayları belgeden hedef öğeye ( yakalama aşaması) gönderilir ve ardından hedef öğeden belgeye ( köpürme aşaması) geri gönderilir. Eski DOM3 etkinlikleri spesifikasyonundaki bu grafik (şimdi superceded, ancak grafik hala geçerli) gerçekten iyi gösteriyor:

Tüm olaylar kabarcık değil, ama çoğu da dahil olmak üzere yapar click.

Yukarıdaki kod örneğindeki yorumlar, nasıl çalıştığını açıklar. matchesbir öğenin bir CSS seçici ile eşleşip eşleşmediğini kontrol eder, ancak elbette bir CSS seçici kullanmak istemiyorsanız bir şeyin ölçütlerinizle eşleşip eşleşmediğini kontrol edebilirsiniz.

Bu kod verbosely bireysel adımları aramak yazılır, ancak (bir polyfill kullanırsanız ve aynı zamanda IE) belli belirsiz-modern tarayıcılarda, kullanabileceğiniz closestve containsyerine döngü:

var target = event.target.closest("td");
    console.log("You clicked a td: " + target.textContent);
} else {
    console.log("That wasn't a td in the container table");
}

Canlı Örnek:

// Handle the event on the container
document.getElementById("container").addEventListener("click", function(event) {
    var target = event.target.closest("td");
    if (target && this.contains(target)) {
        console.log("You clicked a td: " + target.textContent);
    } else {
        console.log("That wasn't a td in the container table");
    }
});

table {
    border-collapse: collapse;
    border: 1px solid #ddd;
}
th, td {
    padding: 4px;
    border: 1px solid #ddd;
    font-weight: normal;
}
th.rowheader {
    text-align: left;
}
td {
    cursor: pointer;
}

<table id="container">
    <thead>
        <tr>
            <th>Language</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="rowheader">English</th>
            <td>one</td>
            <td>two</td>
            <td>three</td>
        </tr>
        <tr>
            <th class="rowheader">Español</th>
            <td>uno</td>
            <td>dos</td>
            <td>tres</td>
        </tr>
        <tr>
            <th class="rowheader">Italiano</th>
            <td>uno</td>
            <td>due</td>
            <td>tre</td>
        </tr>
    </tbody>
</table>

closestçağırdığınız öğeyi verilen CSS seçicisiyle eşleşip eşleşmediğini kontrol eder ve varsa aynı öğeyi döndürür; değilse, üst öğenin eşleşip eşleşmediğini kontrol eder ve varsa üst öğeyi döndürür; değilse, ebeveynin ebeveynini vb. kontrol eder. Böylece, ata listesindeki seçiciyle eşleşen "en yakın" öğeyi bulur. Bu kapsayıcı eleman geçmiş gidebilir beri kullanımlar Yukarıdaki kod containseşleşen bir elemanı bulunduğu takdirde kontrol etmek, Tüp içindeki var - konteyner üzerine olay çengel, belirttiğiniz beri sadece manuel kontrol elemanları istiyorum içinde o kabın .

Tablo örneğimize geri dönersek, tablo hücresinde bir tablonuz varsa, tabloyu içeren tablo hücresiyle eşleşmeyeceği anlamına gelir:

// Handle the event on the container
document.getElementById("container").addEventListener("click", function(event) {
    var target = event.target.closest("td");
    if (target && this.contains(target)) {
        console.log("You clicked a td: " + target.textContent);
    } else {
        console.log("That wasn't a td in the container table");
    }
});

table {
    border-collapse: collapse;
    border: 1px solid #ddd;
}
th, td {
    padding: 4px;
    border: 1px solid #ddd;
    font-weight: normal;
}
th.rowheader {
    text-align: left;
}
td {
    cursor: pointer;
}

<!-- The table wrapped around the #container table -->
<table>
    <tbody>
        <tr>
            <td>
                <!-- This cell doesn't get matched, thanks to the `this.contains(target)` check -->
                <table id="container">
                    <thead>
                        <tr>
                            <th>Language</th>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th class="rowheader">English</th>
                            <td>one</td>
                            <td>two</td>
                            <td>three</td>
                        </tr>
                        <tr>
                            <th class="rowheader">Español</th>
                            <td>uno</td>
                            <td>dos</td>
                            <td>tres</td>
                        </tr>
                        <tr>
                            <th class="rowheader">Italiano</th>
                            <td>uno</td>
                            <td>due</td>
                            <td>tre</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                This is next to the container table
            </td>
        </tr>
    </tbody>
</table>

Temelde elemanla ilişkilendirme şekli budur. .clickgeçerli DOM .oniçin geçerliyken (delegasyon kullanarak) etkinlik ilişkilendirmesinden sonra DOM'a eklenen yeni öğeler için geçerli olmaya devam edecektir.

Hangisi daha iyi, duruma bağlı olduğunu söyleyebilirim.

Misal:

<ul id="todo">
   <li>Do 1</li>
   <li>Do 2</li>
   <li>Do 3</li>
   <li>Do 4</li>
</ul>

Etkinlik'i tıklayın:

$("li").click(function () {
   $(this).remove ();
});

Etkinlik.

$("#todo").on("click", "li", function () {
   $(this).remove();
});

Seçiciyi .on içinde ayırdığımı unutmayın. Nedenini açıklayacağım.

Diyelim ki bu ilişkiden sonra aşağıdakileri yapalım:

$("#todo").append("<li>Do 5</li>");

Farkı burada göreceksiniz.

Etkinlik .click aracılığıyla ilişkilendirildiyse, görev 5 tıklama etkinliğine uymaz ve bu nedenle kaldırılmaz.

.On ile ilişkilendirilmişse, seçici ayrı olarak, itaat edecektir.

Etkinlik delegasyonunu anlamak için öncelikle etkinlik delegasyonuna neden ve ne zaman ihtiyacımız olduğunu veya ne zaman istediğimizi bilmemiz gerekir.

Birçok vaka olabilir, ancak olay yetkisi için iki büyük kullanım vakasını ele alalım. 1. İlk durum, ilgilendiğimiz çok sayıda alt öğeye sahip bir öğemiz olduğunda. Bu durumda, tüm bu alt öğelere bir olay işleyicisi eklemek yerine, bunu ana öğeye ekleyip etkinliğin hangi alt öğeye tetiklendiği.

Olay yetkisi için ikinci kullanım durumu, sayfamız yüklendiğinde henüz DOM'da olmayan bir öğeye bir olay işleyicisi eklenmesini istediğimiz durumdur. Tabii ki, çünkü sayfamızda olmayan bir şeye olay işleyici ekleyemeyiz, bu nedenle kodladığımız bir kullanımdan kaldırılma durumunda.

Sayfanızı yüklerken DOM'da 0, 10 veya 100 öğeden oluşan bir listeniz olduğunu ve listeye eklemek için elinizde daha fazla öğe beklediğini varsayalım. Dolayısıyla, gelecekteki öğeler için bir olay işleyicisi eklemenin bir yolu yoktur veya bu öğeler henüz DOM'da eklenmez ve ayrıca çok fazla öğe olabilir, bu nedenle her birine bir olay işleyicisinin eklenmesi yararlı olmaz onları.

Etkinlik Delegasyonu

Pekala, olay heyeti hakkında konuşmak için, aslında konuşmamız gereken ilk kavram olay köpürmesidir.

Olay köpürme: Olay köpürme, bir DOM öğesinde bir olay tetiklendiğinde veya tetiklendiğinde, örneğin aşağıdaki görüntüdeki düğmemize tıklandığında, aynı etkinliğin tüm üst öğelerde de tetiklendiği anlamına gelir.

Olay ilk önce düğmeye basıldı, ancak daha sonra tüm üst öğelere birer birer ateşlenecek, bu nedenle paragrafı ana eleman bölümüne ve aslında bir DOM ağacında sonuna kadar tetikleyecek kök olan HTML öğesine kadar. Bu yüzden etkinliğin DOM ağacının içinde patladığını söylüyoruz ve bu yüzden buna kabarcıklanma deniyor.

Hedef öğe: Olayın ilk kez tetiklendiği öğeye hedef öğe denir, dolayısıyla olayın gerçekleşmesine neden olan öğeye hedef öğe denir. Yukarıdaki örneğimizde, elbette, tıklanan düğme. Önemli olan, bu hedef öğenin olay nesnesinde bir özellik olarak depolanmasıdır. Bu, olayın da tetikleneceği tüm üst öğelerin olayın hedef öğesini bileceği ve dolayısıyla olayın ilk tetiklendiği yerdir.

Bu, bizi etkinlik temsilcisine getirir, çünkü etkinlik DOM ağacında patlarsa ve etkinliğin nerede tetiklendiğini bilirsek, bir üst öğeye bir olay işleyicisi ekleyebilir ve etkinliğin kabarmasını bekleyebiliriz ve hedef öğemizle ne yapmak istiyorsak onu yapın. Bu tekniğe olay yetkisi denir. Buradaki örnekte, olay işleyicisini ana öğeye ekleyebiliriz.

Pekala, yine de olay yetkisi, olay işleyicisini ilgilendiğimiz orijinal öğeye kurmamak, üst öğeye eklemek ve temelde olayı havaya uçurduğu için yakalamaktır. Ardından, hedef öğe özelliğini kullanmakla ilgilendiğimiz öğeye göre hareket edebiliriz.

Örnek: Şimdi sayfamızda iki liste öğemiz olduğunu varsayalım, bu listeye öğeler ekledikten sonra bir veya daha fazla öğeyi silmek istiyoruz. Etkinlik delegasyon tekniğini kullanarak amacımızı kolayca elde edebiliriz.

<div class="body">
    <div class="top">

    </div>
    <div class="bottom">
        <div class="other">
            <!-- other bottom elements -->
        </div>
        <div class="container clearfix">
            <div class="income">
                <h2 class="icome__title">Income</h2>
                <div class="income__list">
                    <!-- list items -->
                </div>
            </div>
            <div class="expenses">
                <h2 class="expenses__title">Expenses</h2>
                <div class="expenses__list">
                    <!-- list items -->
                </div>
            </div>
        </div>
    </div>
</div>

Bu listeye öğe ekleme:

const DOMstrings={
        type:{
            income:'inc',
            expense:'exp'
        },
        incomeContainer:'.income__list',
        expenseContainer:'.expenses__list',
        container:'.container'
   }


var addListItem = function(obj, type){
        //create html string with the place holder
        var html, element;
        if(type===DOMstrings.type.income){
            element = DOMstrings.incomeContainer
            html = `<div class="item clearfix" id="inc-${obj.id}">
            <div class="item__description">${obj.descripiton}</div>
            <div class="right clearfix">
                <div class="item__value">${obj.value}</div>
                <div class="item__delete">
                    <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
                </div>
            </div>
        </div>`
        }else if (type ===DOMstrings.type.expense){
            element=DOMstrings.expenseContainer;
            html = ` <div class="item clearfix" id="exp-${obj.id}">
            <div class="item__description">${obj.descripiton}</div>
            <div class="right clearfix">
                <div class="item__value">${obj.value}</div>
                <div class="item__percentage">21%</div>
                <div class="item__delete">
                    <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
                </div>
            </div>
        </div>`
        }
        var htmlObject = document.createElement('div');
        htmlObject.innerHTML=html;
        document.querySelector(element).insertAdjacentElement('beforeend', htmlObject);
    }

Ürünleri sil:

var ctrlDeleteItem = function(event){
       // var itemId = event.target.parentNode.parentNode.parentNode.parentNode.id;
        var parent = event.target.parentNode;
        var splitId, type, ID;
        while(parent.id===""){
            parent = parent.parentNode
        }
        if(parent.id){
            splitId = parent.id.split('-');
            type = splitId[0];
            ID=parseInt(splitId[1]);
        }

        deleteItem(type, ID);
        deleteListItem(parent.id);
 }

 var deleteItem = function(type, id){
        var ids, index;
        ids = data.allItems[type].map(function(current){
            return current.id;
        });
        index = ids.indexOf(id);
        if(index>-1){
            data.allItems[type].splice(index,1);
        }
    }

  var deleteListItem = function(selectorID){
        var element = document.getElementById(selectorID);
        element.parentNode.removeChild(element);
    }

C # 'daki bir temsilci, C veya C ++' daki bir işlev işaretçisine benzer. Bir temsilci kullanmak, programcının bir temsilci nesnesinin içindeki bir yönteme başvurusunu kapsüllemesine olanak tanır. Daha sonra temsilci nesne, derleme zamanında hangi yöntemin çağrılacağını bilmeden başvurulan yöntemi çağıran koda iletilebilir.

Bu bağlantıya bakın -> http://www.akadia.com/services/dotnet_delegates_and_events.html

Olay yetkilendirmesi, JavaScript olaylarının sıklıkla gözden kaçan iki özelliğinden yararlanır: olay köpürme ve hedef öğe.Öğe üzerinde bir olay tetiklendiğinde, örneğin bir düğmeyi fareyle tıklattığınızda, aynı olay o öğenin tüm atalarında da tetiklenir . Bu işlem olay köpürmesi olarak bilinir; etkinlik, kaynak öğeden DOM ağacının en üstüne kadar kabarır.

Kullanıcı bir tablo hücresini tıkladığında bir şey olmasını istediğiniz 10 sütun ve 100 satır içeren bir HTML tablosu düşünün. Örneğin, bir kez tıklandığında bu boyuttaki bir tablonun her hücresini düzenlenebilir yapmak zorunda kaldım. 1000 hücrenin her birine olay işleyicileri eklemek önemli bir performans sorunu ve potansiyel olarak tarayıcıyı kilitleyen bellek sızıntılarının kaynağı olacaktır. Bunun yerine, olay yetkisi kullanarak, tablo öğesine yalnızca bir olay işleyicisi ekler, click olayını durdurur ve hangi hücrenin tıklandığını belirlersiniz.

Bir alt öğede bir olay meydana geldiğinde tetiklenen bir üst öğeye olay dinleyicisi ekleyin.

Bir olay DOM içinden alt öğeden bir üst öğeye geçtiğinde, bu olay Olay Yayılımı olarak adlandırılır ;

Bu örnekte, bir düğmedeki olay (onclick) üst paragrafa iletilir.

$(document).ready(function() {

    $(".spoiler span").hide();

    /* add event onclick on parent (.spoiler) and delegate its event to child (button) */
    $(".spoiler").on( "click", "button", function() {
    
        $(".spoiler button").hide();    
    
        $(".spoiler span").show();
    
    } );

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<p class="spoiler">
    <span>Hello World</span>
    <button>Click Me</button>
</p>

Codepen