使用事件代理能减少点击事件的使用,减少事件的性能消耗,使用构造函数事件调用事件监听减少点击事件
<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没有出现绑定点击事件。