關於js中的事件委託小案例

標籤：add   name   動態   轉換   節點   cas   event   node   控制   

需求：頁面上有一個按鈕，和一個空的ul，要求點擊按鈕，會給ul中動態添加li元素，然後，點擊動態添加的元素，在控制台上輸出，這是第幾個元素

<ul>        </ul><button>點擊增加</button>

    var ul = document.querySelector(‘ul‘);    var btn = document.querySelector(‘button‘);
　　//動態添加元素    btn.addEventListener(‘click‘,function(){        var li = document.createElement(‘li‘);        li.innerHTML=‘我是新添加的li元素‘;        ul.appendChild(li);    })    ul.addEventListener(‘click‘,function(e){        var lis = document.querySelectorAll(‘li‘);        for (var i = 0; i < lis.length; i++) {            lis[i].index=i        }        var tag = e.target;//擷取當前點擊的元素節點        if (tag.nodeName.toLowerCase()==‘li‘) {//使用元素節點的nodeName屬性獲得元素的名稱，並轉換為小寫，判斷是不是我們想要的            console.log(tag.index);//如果是，就輸出對應的索引值        }    });

 

關於js中的事件委託小案例