事件

文章目录

1. 1. 事件处理程序
2. 2. 鼠标与滚轮事件
   1. 2.1. 客户区坐标位置
   2. 2.2. 修改键
3. 3. 键盘与文本事件
   1. 3.1. textInput 事件
4. 4. HTML5 事件
   1. 4.1. contextmenu 事件
   2. 4.2. beforeunload(页面卸载前) 事件
   3. 4.3. DOMContentLoaded(IE 9+) 事件
   4. 4.4. readystatechange 事件
5. 5. 内存和性能
   1. 5.1. 事件委托

事件处理程序

var EventUtil = {
        //跨浏览器的事件处理程序
        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;
            }
        },
        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;
            }
        },

        //跨浏览器的事件对象
        getEvent: function(event) {
            return event ? event : window.event;
        },

        getTarget: function(event) {
            return event.target || event.srcElement;
        },

        preventDefault: function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },

        stopPropagation: function(event) {
            if (event.stopPropagation) {
                event.stopPropagation();
            } else {
                event.cancelBubble = true;
            }
        },

        //跨浏览器取得相关元素
        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;
            }
        },

        //鼠标按钮
        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;
                }
            }
        },

        //鼠标滚轮事件
        getWheelDelta: function(event) {
            if (event.wheelDelta) {
                return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
            } else {
                return -event.detail * 40;
            }
        },

        //字符编码
        getCharCode: function(event) {
            if (typeof event.charCode == "number") {
                return event.charCode;    //只有在发生keypress事件才包含值
            } else {
                return event.keyCode;
            }
        },

        //操作剪贴板
        getClipboardText: function(event) {
            var clipboardData = (event.clipboardData || window.clipboardData);
            return clipboardData.getData("text");
        },

        setClipboardText: function(event){
            if (event.clipboardData) {
                return event.clipboardData.setData("text/plain", value);
            } else if (window.clipboardData) {
                return window.clipboardData.setData("text", value);
            }
        },
    };

 //跨浏览器的事件处理程序示例：
var btn = document.getElementById("myBtn");
var handler = function(){
    alert("Clicked");
};
EventUtil.addHandler(btn, "click", handler);

//这里省略其它代码

EventUtil.removeHandler(btn, "click", handler);



//跨浏览器取得相关元素示例：
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "mouseout", function(event){
    event = Event.getEvent(event);
    var target = EventUtil.getTarget(event);
    var relatedTarget = EventUtil.getRelatedTarget(event);
    alert("Moused out fo " + target.tagName + " to " + relatedTarget.tagName);
});

鼠标与滚轮事件

客户区坐标位置

可以使用类似下列代码取得鼠标事件的客户端坐标信息:

var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
    event = EventUtil.getEvent(event);
    alert("Client coordinates: " + event.clientX + "," + event.clientY);
    });

修改键

当某个鼠标事件发生时，通过检测这几个属性就可以确定用户是否同时按下了其中的键。

var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
    event = EventUtil.getEvent(event);
    var keys = new Array();

    if (event.shiftKey) {
        keys.push("shift");
    }

    if (event.ctrlKey) {
        keys.push("ctrlKey");
    }

    if (event.altKey) {
        keys.push("altKey");
    }

    if (event.metaKey) {
        keys.push("metaKey");
    }
    
    alert("Keys: " + keys.join(","));
});

键盘与文本事件

textInput 事件

这个用于替代 keypress 的textInput 事件的行为稍有不同。区别之一就是任何可以获得焦点的元素都可以触发 keypress 事件，但只有可编辑区域才能触发 textInput 事件。区别之二是 textInput 事件只会在用户按下能够输入实际字符的键时才会触发，而 keypress 事件则在按下那些能够影响文本显示的键时也会触发(例如退格键)。

由于 textInput 主要考虑的是字符，因此它的 event 对象中还包含一个 data 属性，这个属性的值就是用户输入的字符(而非字符编码)。话句话说，用户在没有按上档键的情况下按下了S键，data 的值就是”s”,而如果在按住上档键时按下该键，data 的值就是”s”。

var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "textInput", function(event) {
    event = EventUtil.getEvent(event);
    alert(event.data);
})

HTML5 事件

contextmenu 事件

EventUtil.addHandler(window, "load", function(event) {
    var div = document.getElementById('myDiv');

    EventUtil.addHandler(div, "contextmenu", function(event){
        event = EventUtil.getEvent(event);
        EventUtil.preventDefault(event);

        var menu = document.getElementById('myMenu');
        menu.style.left = event.clientX + 'px';
        menu.style.top = event.clientY = 'px';
        menu,style.visibility = "visible";
    });

    EventUtil.addHandler(document, 'click', function(){
        document.getElementById('myMenu').style.visibility = 'hidden';
    });
})

beforeunload(页面卸载前) 事件

EventUtil.addHandler(window, "beforeunload", function(event){
    event = EventUtil.getEvent(event);
    var message = "I'm really going to miss you if you go.";
    event.returnValue = message;
    return message;
});

DOMContentLoaded(IE 9+) 事件

DOMContentLoaded 事件在形成完整的 DOM 树之后就会触发，不理会图像、JavaScript 文件、CSS 文件或其他资源是否已经下载完毕。

EventUtil.addHandler(document, "DOMContentLoaded", function(event){
    alert('Content loaded');
});

readystatechange 事件

readyState 属性： uninitialized|loading|loaded|interactive|complete

内存和性能

事件委托

//一下面的 HTML 代码为例
<ul id="myLinks">
    <li id="goSomewhere">Go somewhere</li>
    <li id="doSomething">Do something</li>
    <li id="sayHi">Say hi</li>
</ul>

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.google.com';
            break;

        case "sayHi":
            alert("hi");
            break;
    }
});

最适合采用事件委托技术的事件包括 click、mousedown、mouseup、keydown、keyup、和keypress。虽然 moseover 和 mouseout 事件也冒泡，但要适当处理它们并不容易，而且经常需要计算元素的位置。(因为当鼠标从一个元素移到其子节点时，或者当鼠标移出该元素时，都会触发 mouseout事件。)