阿里巴巴面試題(轉載）

原文鏈接：鏈接：https://blog.csdn.net/Y0Q2T57s/article/details/79989753

使用addEventListener點擊li彈出內容，並且動態添加li之後有效

最後一題他沒給答案，這個可以用事件委託，點擊每個li彈出中間的數字

事件委託的原理：

事件委託是利用事件的冒泡原理來實現的，何爲事件冒泡呢？就是事件從最深的節點開始，然後逐步向上傳播事件，舉個例子：頁面上有這麼一個節點樹，div>ul>li>a;比如給最裏面的a加一個click點擊事件，那麼這個事件就會一層一層的往外執行，執行順序a>li>ul>div，有這樣一個機制，那麼我們給最外面的div加點擊事件，那麼裏面的ul，li，a做點擊事件的時候，都會冒泡到最外層的div上，所以都會觸發，這就是事件委託，委託它們父級代爲執行事件。子節點實現相同的功能

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    var list = document.querySelectorAll('ul li');

    ul.addEventListener('click', function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;

        for(var i = 0, len = list.length; i < len; i++){
            if(list[i] == target){
                alert(i + "----" + target.innerHTML);
            }
        }
    });
</script>

這個target,可以用

target.nodeName.toLowerCase()

判斷這個標籤是什麼標籤，target.nodeName.toLowerCase()==='li'  ,表示是li標籤

還可以用target.**來獲取他的屬性值，比如img標籤裏的src屬性值，可以用target.src