什么是DOM

DOM是 JS操作网页的接口，全称 文档对象模型 （Document Object Model）。它的作用是将网页转化为一个JS对象，从而可以用脚本进行各种操作（增删改查）。

什么是事件委托？

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

事件的冒泡原理

image.png

事件委托的原理

事件委托就是利用事件的冒泡原理实现的，事件触发的过程就是从顶层节点 Document 开始一层一层往下找，当找到要触发的事件元素时，事件从触发的节点逐级向上传播（这个过程就是事件冒泡），并且这个过程会触发所有的同事件。

事件委托代码示例

考虑一种情况，如果需要给多个 li 元素注册一个点击事件该如何做？比较原始的办法是循环遍历多个li 元素给他们分别注册一个点击事件。另一个方法就是采用事件委托的方式，给li的父元素注册点击事件。

循环遍历

<ul id="ul">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<script>
    var liList = document.getElementsByTagName('li');
    for (var i = 0; i < liList.length; i++) {
        liList[i].onclick = function () {
            alert(this.innerHTML)
        }
    }
</script>

事件委托

<ul id="ul">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
document.getElementById('ul').onclick = function (e) {
            e = e || window.event;
            console.log(e.target.innerHTML);
        }

怎么取消事件冒泡？

捕获不可以取消，但冒泡可以

stopPropagation()可以终端冒泡，浏览器不在向上走。

怎么阻止默认行为？

有些事件不能阻止默认行为

MDN搜索 scroll event，可以看到Bubbles 和 Cancelable
Bubbles 的意思是该事件是否冒泡，所有的冒泡都可以取消
Cancelable 是开发者是否可以阻止默认事件，它与冒泡无关

如何阻止默认行为？

使用 event。preventDefault()或者 return false。