【事件】《JavaScript 高级程序设计》

浏览数：149 / 时间：2015年06月09日

事件冒泡
事件捕获

事件冒泡
<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() 方法的情况下，事件处理程序会在全局作用域中运行，因此this 等于window
         *
         * 这里调用了两次attachEvent() ，为同一个按钮添加了两个不同的事件处理程序。
         * 不过，与DOM方法不同的是，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发
         */

        // 点击按钮 true true true
        document.body.onclick = function(event) {
            console.log(event.currentTarget === document.body)
            console.log(this === document.body)
            console.log(event.target === btn)
        }

        var handler = function(event) {
            switch (event.type) {
                case ‘click‘:
                    break
                case ‘mouseover‘:
                    break
                case ‘mouseout‘:
                    break
            }
        }
        btn.onclick = handler
        btn.onmouseover = handler
        btn.onmosueout = handler

        /**
         * 事件捕获阶段 处于目标阶段 事件冒泡阶段
         */
        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
        }

        /**
         * 与访问 DOM 中的 event 对象不同，要访问 IE 中的 event 对象有几种不同的方式，取决于指定事件处理程序的方法。
         * 在使用DOM0 级方法添加事件处理程序时，event对象作为window 对象的一个属性存在
         * 可是，如果事件处理程序是使用 attachEvent() 添加的，那么就会有一个 event 对象作为参数被传入事件处理程序函数中
         * 在像这样使用attachEvent() 的情况下，也可以通过 window 对象来访问event 对象，就像使用DOM0 级方法时一样
         * 如果是通过HTML 特性指定的事件处理程序，那么还可以通过一个名叫event 的变量来访问event对象（与DOM中的事件模型相同）
         * 
         * srcElment 事件的目标（与DOM中的target属性相同）
         * cancelBubble 默认值为false ，但将其设置为 true就可以取消事件冒泡（与DOM中的stopPropagation()方法的作用相同）
         * stopPropagatioin() 可以同时取消事件捕获和冒泡
         * cancelBubble 由于 IE 不支持事件捕获，因而只能取消事件冒泡
         * returnValue 默认值为true，但将其设置为 false 就可以取消事件的默认行为（与DOM中的preventDefault() 方法的作用相同
        */
    </script>
</body>
</html>

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body onload="console.log(‘Dom loaded‘)">
    <script>
        var addHandler = function(element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false)
            } else if (element.attachEvent) {
                element.attachEvent(‘on‘ + type, handler)
            } else {
                element[‘on‘ + type] = handler
            }
        }
        var removeHandler = function(element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false)
            } else if (element.detachEvent) {
                element.detachEvent(‘on‘ + type, handler)
            } else {
                element[‘on‘ + type] = null
            }
        }
        var getTarget = function(event) {
            return event.target || event.srcElement
        }

        // 确定浏览器是否支持DOM2级事件规定的HTML事件
        var isSupported = document.implementation.hasFeature(‘HTMLEvents‘, ‘2.0‘)
        // 确定浏览器是否支持“DOM3级事件”定义的事件
        var isSupported = document.implementation.hasFeature(‘UIEvent‘, ‘3.0‘)

        // 新图像元素不一定要从添加到文档后才开始加载，只要设置了src属性就开始下载
        var image = document.createElement(‘img‘)
        addHandler(image, ‘load‘, function(event) {
            console.log(getTarget(event).src) // 在使用 attachEvent() 方法的情况下，事件处理程序会在全局作用域中运行，因此this 等于window
        })
        addHandler(image, ‘error‘, function(event) {
        })
        document.body.appendChild(image)
        image.src = ‘http://pic002.cnblogs.com/images/2012/382256/2012080118323766.gif‘

        // 预加载图片
        // 可以像使用<img>元素一样使用Image对象，只不过无法将其添加到DOM树中
        var image2 = new Image()
        addHandler(image2, ‘load‘, function() {
            console.log(‘Image loaded‘)
        })
        image2.src = ‘http://pic002.cnblogs.com/images/2012/382256/2012080118323766.gif‘
    </script>
</body>
</html>