面试: 事件委托(冒泡)减少Dom交互,提高性能

• 根据一下HTML内容, 为每一个li添加点击事件, 输出该li的 innerHTML

<ul style="background-color: blueviolet">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>

• 如果我们用传统的方式, 为每一个li都添加onclick事件, 那么会引起频繁的dom操作, 从而引发浏览器的重绘或者重排, 必然会造成浏览器主线程堵塞

核心思路: 利用html中的冒泡特性, 从而采用事件委托的方式

  var ul = document.querySelector('ul');
  // 只会对 ul 添加监听事件, 因为冒泡事件的特性,当我们点击了 li, 会触发父元素 ul的 onclick
    ul.onclick = function (e) {
        e = e || window.event; //这一行及下一行是为兼容IE8及以下版本
        var target = e.target || e.srcElement;
        if (target.tagName.toLowerCase() === 'li') {
            alert(target.innerHTML);
        }
    };