イベント依頼とは?

前回の面接では答えられませんでした.なぜならば、事件代理(event delegation)は本当に使ったことがないからです.イベント代理はまたイベント依頼と言っています.javaScriptでのバインディング事件の常用テクニックです.名前の通り、「事件代理」とは本来バインディングが必要なイベントを父要素に委託し、父要素に事件の傍受を担当させることです.イベントエージェントの原理は、DOM元素のイベントの泡が発生することである.イベントエージェントを使用する利点は、パフォーマンスを向上させることができます.ケースによって引き出します.今は必要なものがあります.liをクリックして背景色を追加し、彼を並べば、どの背景色がありますか?

<ul>
    <li class="selected">1li>
    <li>2li>
    <li>3li>
    <li>4li>
    <li>5li>
    <li>6li>
    <li>7li>
    <li>8li>
ul>

 *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            width: 400px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        li{
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #000;
            box-sizing: border-box;
        }
        .selected{
            background-color: red;
        }

まず一般的なやり方を見てみます.欠点はいくつかのOclickを保存した関数です.

let oItems = document.querySelectorAll('li');
    let currentItem = oItems[0];
    for (let item of oItems){
        // item.onclick = change;
        item.onclick = function () {
            currentItem.className = '';
            this.className = 'selected';
            currentItem = this;
        }
    }

改良版

let oItems = document.querySelectorAll('li');
    let currentItem = oItems[0];
    for (let item of oItems){
        item.onclick = change;//       item.onclick = change();
    }

    function change() {
        currentItem.className = '';
        this.className = 'selected';
        currentItem = this;
    }

イベント依頼のやり方:ulのクリックを傍受し、直接liのクリックではなく、liは事件を父要素ulに泡を作って、イベントの対象を通じて現在クリックされている要素を入手する.

 let oUl = document.querySelector('ul');
    let oLi = document.querySelector('.selected');
    oUl.onclick = function (event) {
        event = event || window.event;//       
        oLi.className = '';
        let item = event.target;//event.target      li
        item.className = 'selected';
        oLi = item;
    }

最後のイベント依頼方法は、イベントの泡が発生したイベント依頼のメリットを利用しています.1.イベントの数を減らし、性能を向上させます.2.将来の要素を予測し、新たに追加した要素はまだこのイベントをトリガできます.私のもう一つの文章イベントの実行の3段階を見ることができます.