javascript 事件传递

我们先看下默认事件与定制事件的执行顺序:

<a href="javascript: defaultAction();" onclick="customAction()">弹出</a>
<script>
    function defaultAction () {
        console.log('默认事件');
    }
    function customAction () {
        console.log('定制事件');
        alert('定制事件');
    }
</script>

执行结果：

定制事件与自定义事件执行顺序

从执行结果可以看出，在捕捉事件时，将先捕捉DOM绑定的自定义事件，再捕捉默认事件。

---

js有两种事件传递方式：事件冒泡 及 事件捕获
在某些老浏览器上（例如IE9以下），事件冒泡是唯一的事件传递方式；现代浏览器还支持事件捕获事件传递方式。
事件冒泡的方法是从下到上，或者说从内到外，总是从event target开始向上一级一级传递。
事件捕获是从最外层开始向内传递事件。

事件冒泡

<div id="parent">
    <a href="javascript: defaultAction();" id="action">弹出</a>
</div>
<script>
    function defaultAction () {
        console.log('默认事件');
        alert('默认事件');
    }

    function customAction () {
        console.log('定制事件');
        alert('定制事件');
    }

    document.getElementById('action').addEventListener('click', function () {
        customAction();
    });

    document.getElementById('parent').addEventListener('click', function () {
        console.log('事件通过冒泡方式传递给父元素');
        alert('事件通过冒泡传递方式给父元素');
    });
</script>

执行结果：

事件冒泡传递

事件捕获

<div id="parent">
    <a href="javascript: defaultAction();" id="action">弹出</a>
</div>
<script>
    function defaultAction () {
        console.log('默认事件');
        alert('默认事件');
    }

    function customAction () {
        console.log('定制事件');
        alert('定制事件');
    }

    document.getElementById('action').addEventListener('click', function () {
        customAction();
    }, true);

    document.getElementById('parent').addEventListener('click', function () {
        console.log('事件通过捕获方式传递给父元素');
        alert('事件通过捕获方式传递给父元素');
    }, true);
</script>

执行结果：

事件捕获传递