JS 事件代理

使用事件代理能减少点击事件的使用，减少事件的性能消耗，使用构造函数事件调用事件监听减少点击事件

<ul id="list">
            <li>这是第一项</li>
            <li>这是第二项</li>
            <li>这是第三项</li>
            <button type="button" id="btn">按钮</button>
</ul>

const list = document.getElementById('list')
const lis = document.getElementsByTagName('li')
const button = document.getElementById('btn')

function addEvent(elem, type, fn) {
    elem.addEventListener(type, fn)
}

// lisArray = Array.prototype.slice.call(lis);
// console.log(lisArray)

addEvent(list, 'click', (e)=>{
    const target = e.target;
    if(target.nodeName === 'LI'){
        console.log(target)
    }
})

button.addEventListener('click', ()=>{
    const li = document.createElement('li');
    li.innerHTML = '新增内容';
    list.insertBefore(li, button)
})

首先获取到html对应的id，建立构造函数，function addEvent(){},    addEvent()直接调用list获取到li里面的内容，点击(click)后将目标的内容传给target,   elem.addEventListener(type, fn)利用冒泡获取到点击事件，输出内容。可以使用lisArray = Array.prototype.slice.call(lis);代替addEVent()不然会出现，添加按钮后，新添加的li没有出现绑定点击事件。