GitHub 博客园 Nanakon

♫【事件】事件处理程序

事件冒泡
事件捕获


事件冒泡
<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>

 

posted on 2014-02-15 18:35  jzm17173  阅读(192)  评论(0)  编辑  收藏  举报

导航

轻音