• JS 事件代理

    2022-01-13
  • 使用事件代理能减少点击事件的使用,减少事件的性能消耗,使用构造函数事件调用事件监听减少点击事件

    <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没有出现绑定点击事件。

    JS 事件代理

    原文:https://www.cnblogs.com/coderatian/p/14801369.html