JS - 事件委托(菜鸟版本)

起由

假如 ul 里面 有一些 li 标签, 相对 li 中具有 ID 值得 添加事件, 但问题是 li是根据后台数据动态生成的 可能会减少 可能会增多 一下几万个 这时传统一个一个绑定事件就是 灾难

 <ul>
    <li>1</li>    
    <li id="2">2</li>      
    <li>3</li>
    <li>4</li>     
 </ul>

为了解决上述问题这里 引入 事件委托

写法

这里获取 id 值为2 的 li标签

    var od = document.querySelector('div')
    od.addEventListener("click", function(e){
        if( e.target.id =="2"){
                console.log(e.target)  //  输出结果   <li id="2">2</li>  
        	console.log(e.target.id)
        	
        }
    })

• **e.target ** 表示被点击的 元素, 具有以下属性
  • e.target.className 类名
  • e.target.id ID值
  • e.target.nodeName 标签名

以上3个属性 配合 if 语句 基本可以满足各种需求