♫【事件】事件处理程序

事件冒泡
事件捕获


事件冒泡
<div>
<body> document.body
<html> document.documentElement
document document

IE5.5及更早版本中的事件冒泡会跳过<html>元素。IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <button id="myBtn">click</button>

    <script>

        var btn = document.getElementById('myBtn')

        /**

         * 使用 DOM0 级方法指定的事件处理程序被认为是元素的方法。

         * 因此,这时候的事件处理程序是在元素的作用域中运行;换句话说,程序中的this 引用当前元素

         */

        btn.onclick = function() {

            console.log(this.id)

        }

        btn.onclick = null



        /**

         * addEventListener removeEventListener DOM2级事件

         *

         * attachEvent detachEvent

         * 在使用 attachEvent() 方法的情况下,事件处理程序会在全局作用域中运行,因此this 等于window

         *

         * 这里调用了两次attachEvent() ,为同一个按钮添加了两个不同的事件处理程序。

         * 不过,与DOM方法不同的是,这些事件处理程序不是以添加它们的顺序执行,而是以相反的顺序被触发

         */



        /**

         * 事件捕获阶段 处于目标阶段 事件冒泡阶段

         */

        btn.onclick = function(event) {

            console.log('btn', event.eventPhase) // 2

        }

        document.body.addEventListener('click', function(event) {

            console.log('body true', event.eventPhase) // 1

        }, true)

        document.body.onclick = function(event) {

            console.log('body', event.eventPhase) // 3

        }

    </script>

</body>

</html>

 

你可能感兴趣的:(事件)