浅谈浏览器Dom事件、Ajax、Bom

0. 事件流以及事件委托机制

假设一段DOM结构如下：

<ul>
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>
</ul>

js中对body注册点击事件(也可以对ul注册点击事件)

document.body.addEventListener('click', e => {
    console.log('捕获阶段');
}, true)

document.body.addEventListener('click', e => {
    console.log('冒泡阶段');
}, false)

true表示捕获阶段触发，false表示冒泡阶段触发

如果我们为每个li赋予点击事件，会注册多个方法，但是在ul(外层父层)中只需要注册一次，利用捕获冒泡的原理，相当于每个li都能触发事件，这就是事件委托机制。

其中可通过e.target来判断和执行不同的点击结果。

1. 事件类型

并不是所有事件都会冒泡。如注册scroll事件，就不会触发冒泡。

mouseover & mouseenter 的区别就是后者不会冒泡，假设给ul设置了mouseover事件，在鼠标经过ul时理论应该触发一次事件，但是因为ul中还有li元素，鼠标每经过一个li元素就会冒泡到ul上的mouseover，造成多次触发，所以需要在li中多处理阻止冒泡，而mouseenter就不会出现这种问题。

2. css对事件的影响

我们经常会碰到类似设置半透明遮罩的需求，通常是绝对定位一个div盖在元素上方，这时遮罩div会覆盖住当前元素使得元素无法进行交互行为，通过一行css代码即可解决：
1
{ pointer-events: none; }
指定某个给定的区域是否允许用户操作，以及如何响应用户操作（比如浏览器自带的划动、缩放等）
1
{ touch-action: .... }

3. Ajax基本实现四步

function majax() {
    var xhr = new XMLHttpRequest()

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                ...
            }
        }
    }

    xhr.open('post', '/xxx', true)
    xhr.setRequestHeader('Content-type', 'application/json;charset=UTF-8')

    var params = { ... }

    xhr.send(params)
}