30. JS

115. 事件的绑定

    <script>
        window.onload = function () {
            var btn01 = document.getElementById("btn01");

            /**
             * 使用对象.事件 = 函数的形式绑定响应函数
             * 它只能同时为一个元素的一个事件绑定一个响应函数
             * 不能绑定多个，如果绑定了多个，则后边会覆盖掉前面的
             */
            btn01.onclick = function () {
                alert(1);
            };
            btn01.onclick = function () {
                alert(2);
            };

            /**
             * addEventListener()
             * - 通过这个方法也可以为元素绑定响应函数
             * - 参数：
             *      1. 事件的字符串，不要on
             *      2. 回调函数，当事件触发时该函数会被调用
             *      3. 是否在捕获阶段触发事件，需要一个布尔值，一般都传false
             *  使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应事件，
             *  这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。
             */
            btn01.addEventListener('click',function () {
                alert(1);
            },false);
            btn01.addEventListener('click',function () {
                alert(2);
            },false);
            btn01.addEventListener('click',function () {
                alert(3);
            },false);
        };
    </script>

117. 事件的传播

<script>
    window.onload = function () {

        /**
         * 事件的传播:
         *  - 关于事件的传播网景公司和微软公司有不同的理解
         *  - 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，
         *  然后再向当前元素的祖先元素上传播，也就是说事件应该在冒泡阶段执行
         *  - 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素最外层的祖先元素的事件
         *  然后再向内传播给后代元素
         *  - W3C综合了两个公司的方案，将事件传播分成了三个阶段
         *      1. 捕获阶段
         *          - 在捕获阶段时从最外层的祖先元素开始，向目标元素进行捕获，但是默认此时不会触发事件
         *      2. 目标阶段
         *          - 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
         *      3. 冒泡阶段
         *          - 事件从目标元素向其祖先元素传递，依次触发祖先元素上的事件
         *  如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true，一般情况下我们不会希望
         *  在捕获阶段触发事件，所以这个参数一般都是false
         */

        var btn01 = document.getElementById("box1");
        var btn02 = document.getElementById("box2");
        var btn03 = document.getElementById("box3");

        btn01.addEventListener("click",function () {
            alert("box1");
        },false);

        btn02.addEventListener("click",function () {
            alert("box2");
        },false);

        btn03.addEventListener("click",function () {
            alert("box3");
        },true);
    };
</script>