JS中Event对象的常见应用用于取消事件的默认行为，将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的

用于取消事件的默认行为，将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。

例如，如果 type 属性是 "submit"的表单提交，a标签的默认行为是跳转到对应的URL，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单和链接跳转。

注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。

该方法用于阻止事件的冒泡，不让事件从子元素向父元素及上层元素冒泡，但是默认事件仍让会执行，比如a标签的跳转行为仍然会执行。

注意，使用 event.preventDefault() 可以取消事件的默认行为，但不能阻止事件冒泡，而使用 event.stopPropagation() 能阻止事件冒泡却不能取消事件的默认行为。如果既想取消事件的默认行为，又想阻止事件冒泡，则可以直接用 return false。

3、event.stopImmediatePropagation()

这个一般比较少见，有什么用呢？比如当使用 addEventListener 在同一个元素上绑定多个相同类型事件的事件监听函数时，先后绑定了click事件A 和 click事件B。

正常情况下，我点击元素会先触发事件A，然后再触发事件B，但有时候我就只想触发事件A，而不想触发事件B，那该怎么办呢？这时就可以在事件A的处理函数中添加 event.stopImmediatePropagation() ，即可让剩下的监听函数不会被执行，包括事件冒泡行为。

<div>
	<button id="btn" type="button">别说话，点我</button>
</div>

<script>
    var btn = document.getElementById("btn");
    btn.addEventListener("click", (event) => {
        console.log("我是button按钮上被绑定的第一个监听函数");
    }, false);

    btn.addEventListener("click", (event) => {
        console.log("我是button按钮上被绑定的第二个监听函数");
        event.stopImmediatePropagation();
        // 执行stopImmediatePropagation方法，阻止click事件冒泡，并且阻止button按钮上后面绑定的其他click事件的事件监听函数的执行
    }, false);

    btn.addEventListener("click", (event) => {
        console.log("我是button按钮上被绑定的第三个监听函数");
        // 该监听函数排在上个函数后面，该函数不会被执行
    }, false);

    document.querySelector("div").addEventListener("click", (event) => {
        console.log("我是div元素，我是button按钮的上层元素");
        // button按钮的click事件没有向上冒泡，该函数不会被执行
    }, false);
</script>

正常情况下，未 event.stopImmediatePropagation() 添加之前：

在第二个绑定事件中添加 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>