Event对象的常见应用

1、event.preventDefault()

用于取消事件的默认行为，将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。
例如，如果 type 属性是 "submit"的表单提交，a标签的默认行为是跳转到对应的URL，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单和链接跳转。
注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。

---

2、event.stopPropagation()

该方法用于阻止事件的冒泡，不让事件从子元素向父元素及上层元素冒泡，但是默认事件仍让会执行，比如a标签的跳转行为仍然会执行。
注意，使用 event.preventDefault() 可以取消事件的默认行为，但不能阻止事件冒泡，而使用 event.stopPropagation() 能阻止事件冒泡却不能取消事件的默认行为。如果既想取消事件的默认行为，又想阻止事件冒泡，则可以直接用 return false。

---

3、event.stopImmediatePropagation()

当使用 addEventListener 在同一个元素上绑定多个相同类型事件的事件监听函数时，比如先后绑定了click事件A 和 click事件B。
正常情况下，我点击元素会先触发事件A，然后再触发事件B，但有时候我就只想触发事件A，而不想触发事件B，那该怎么办呢？
这时就可以在事件A的处理函数中添加 event.stopImmediatePropagation() ，即可让剩下的监听函数不会被执行，包括事件冒泡行为。

---

4、event.target 和 event.currentTarget

target：触发事件的元素
currentTarget：事件绑定的元素

两者在没有冒泡的情况下，是一样的值，但在用了事件委托的情况下，就不一样了：
event.target 是引发事件的 目标元素(原始点击位置)，它在冒泡过程中不会发生变化。
event.currentTarget 是当前正在执行的监听函数所在的那个节点，在冒泡过程中值会发发生变化， event.currentTarget === this（this 指向触发事件的内部那个绑定监听函数的元素节点对象）。

举例1：

<ul id="ul">
    <li class="item1">li item1</li>
    <li class="item2">li item2</li>
    <li class="item3">li item3</li>
</ul>

<script>
    var ul = document.getElementById("ul")
    ul.addEventListener('click', function (event) {
        console.log(this);
        console.log(event.target); // 点击哪个li就获取那个对应的li对象
        console.log(event.currentTarget); // 每次都是最外层的ul对象，完全等于this
        console.log("------------------");
    }, false);
</script>

举例2：

<form id="form">
    FORM
    <div>
        DIV
        <p>P</p>
    </div>
</form>

<script>
    var form = document.querySelector('#form')
    form.addEventListener('click', function (e) {
        console.log("target = " + e.target.tagName);
        console.log("this = " + this.tagName);
        console.log("currentTarget = " + e.currentTarget.tagName);
        var i
        var child = e.target.children
        for (i = 0; i < child.length; i++) {
            if (child.length < 1) return
            else {
                // 设置e.target的children所有的元素节点的背景颜色的值为 #fff
                child[i].style.backgroundColor = '#fff'
            }
        }
        // 设置e.target的背景颜色的值为 pink
        e.target.style.backgroundColor = 'pink'
    })
</script>