Js事件小结

Contents

1. 1. Forword
2. 2. EventUtil
3. 3. 事件委托
   1. 3.1. 传统写法
   2. 3.2. 事件委托技术
   3. 3.3. 优点
4. 4. 移除事件
5. 5. 特定设备

事件是Javascript中最重要的主题之一，深入理解事件的工作原理机制以及它们对性能的影响至关重要。

Forword

一个章节的学习完成之后，感觉对浏览器历史发展有了些许的了解。明白了Opera的伟大之处然并卵。以后需要更加规范地书写Js，尽量限制一个页面的事件数量，从效果问题转而关注性能问题。

EventUtil

EventUtil是一个用来适配浏览器的事件添加对象，能够帮助你更加方便的添加DOM事件兼容IE，用法略

//跨浏览器事件对象EventUtil
var EventUtil = {

	//添加事件（兼容IE），DOM2事件优先于DOM0级事件
    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
        }
    },

    //获取event对象（兼容IE）
    getEvent : function(event){
        return event ? event : window.event
    },

    //获取事件目标--target对象（兼容IE）
    getTarget: function(event){
        return event.target || event.srcElement           
    },

    //取消事件默认行为（兼容IE）
    preventDetault: function(event){
        if(event.preventDetault){
            event.preventDetault()
        } else {
            event.returnValue = false
        }
    },

    //移除事件（兼容IE）
    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    
        }
    },

    //阻止事件冒泡（兼容IE）
    stopPropagation: function(event){
        if(event.stopPropagation){
            event.stopPropagation()
        } else {
            event.cancelBubble = true
        }
    },

    //获取事件相关元素信息（兼容IE<=8）
    getRelatedTarget: function(event){
        if(event.relatedTarget){
            return event.relatedTarget
        } else if(event.toElement){
            return event.toElement
        } else if(event.fromElement){
            return event.fromElement
        } else {
            return null
        }
    },

    //获取鼠标按钮属性值（兼容IE<=8）
    getButton: function(event){
            if(document.implementation.hasFeature("MouseEvents", "2.0")){
            return event.button
        } else {
            switch(event.button){
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                    return 0
                case 2:
                case 6:
                    return 2
                case 4:
                    return 1
            }
        }
    },

    //获取滚轮增量值（兼容IE，Opera<9.5，Firefox）
    getWheelDelta: function(event){
        if(event.wheelDelta){
            return (client.engine.opera && client.engine.opera < 9.5 ?
                    -event.wheelDelta : event.wheelDelta)
        } else {
            return -event.detail * 40
        }
    },

    //获取键码（兼容IE<=8，Opera）
    getCharCode: function(event){
        if(typeof event.charCode == "number"){
            return event.charCode
        } else {
            return event.keyCode        //Opera,IE<=8 字符编码
        }
    }
}

事件委托

建立在冒泡机制之上的事件委托技术，可以有效地减少事件处理程序的数量。
如为下列元素添加点击事件

<ul id="myLinks">
   <li id="goSomewhere">Go somewhere</li>
   <li id="doSomething">Do something</li>
   <li id="sayHi">Say hi</li>
</ul>

传统写法

var item1 = document.getElementById("goSomewhere"),
    item2 = document.getElementById("doSomething"),
    item3 = document.getElementById("sayHi")

EventUtil.addHandler(item1, "click", function(event){
    location.href = "http://www.wrox.com"
})

EventUtil.addHandler(item2, "click", function(event){
    document.title = "I changed the document's title"
})

EventUtil.addHandler(item3, "click", function(event){
    alert("hi")
})

事件委托技术

适用与键鼠相关的事件：click、mousedown、mouseup、keydown、keyup、keypress

var list = document.getElementById("myLinks")

EventUtil.addHandler(list, "click", function(event){
    event = EventUtil.getEvent(event)
    var target = EventUtil.getTarget(event)

    switch(target.id){
        case "doSomething":
            document.title = "I changed the document's title"
            break
        case "goSomewhere":
            location.href = "http://www.wrox.com"
            break
        case "sayHi":
            alert("hi")
            break
    }
})

优点

• 消耗内存少，提升整体性能

移除事件

建议在浏览器卸载页面之前移除所有的事件处理程序。当一个元素以隐藏或替代的方式“删除”时，必须将被引用的事件移除。

例如在<div>上设置innerHTML可以把button移走，此时
添加

btn.onclick = null

到

document.getElementById("myDiv").innerHTML = "Processing..."

之前，从而确保内存可以再次利用。

又例如用unonload事件跟踪onload事件，从而处理添加的东西~

特定设备

许多特定设备上的浏览器拥有自己的特定事件（特别是Safari），具体设备具体分析