事件委托,使用事件委托的好处是什么?

事件委托 事件委托就是利用事件冒泡机制指定一个事件处理程序,来管理某一类型的所有事件。

即:利用冒泡的原理,把事件加到父级上,触发执行效果。

**好处:

  1. 只在内存中开辟了一块空间,节省资源同时减少了dom操作,提高性能
  2. 对于新添加的元素也会有之前的事件**

例子:ul中触发每个li来改变他们的背景颜色

HTML:

<ul id=ul>

    <li>111111</li>

    <li>222222</li>

    <li>333333</li>

 </ul>

 <button id=button>添加元素</button>

JavaScript:

window.onload = function(){

  let oUl = document.getElementById(ul);

  let aLi = oUl.getElementsByTagName(li);

  let but = document.getElementById(button);

  let now = 3;

  // 事件源:event对象,不管在哪个事件中,只要你操作的哪个元素就是事件源

  // ie:window.event.srcElement

  // 标准:event.target

  oUl.onmouseover = function(e){

    let ev = e || window.event;

    let target = ev.target || ev.srcElement;

    if(target.nodeName.toLowerCase() == li){

      target.style.background = red;

    }

  }

  oUl.onmouseout = function(e){

    let ev = e || window.event;

    let target = ev.target || ev.srcElement;

    if(target.nodeName.toLowerCase() == li){

      target.style.background = ;

    }

  }

  but.onclick = function(){

    now ++;

    let newLi = document.createElement(li);

    newLi.innerHTML = 111111 * now;

    oUl.appendChild(newLi);

  }

}
经验分享 程序员 微信小程序 职场和发展