JS-事件(1)

1. (document, "mousewheel", handleMouseWheel);
2. (document, "DOMMouseScroll", handleMouseWheel);
3. (window, "devicemotion", func(e){})
4. (window, "deviceorientation", function(event){})
5. (window, "DOMContentLoaded", function(event){})
6. (textbox, "keyup", function(event){})
7. (document, "DOMSubtreeModified", function(event){})
8. (window, "hashchange", function(event){})
9. (textbox, "keydown", function(event){})
10. (textbox, "keypress", function(event){})
11. (window, "load", function(event){})
12. (image, "load", function(event){})
13. (window, "pageshow", function(event){})
14. (window, "pagehide", function(event){})
15. (document, "readystatechange", function(event){})
16. (div, "mouseout", function(event){})
17. (window, "resize", function(event){})
18. (window, "scroll", function(event){})
19. (document, "DOMSubtreeModified", function(event){})
20. (document, "DOMCharacterDataModified", function(event){})
21. (textbox, "textInput", function(event){})
22. (textbox, "focus", function(event){})
23. (textbox, "blur", function(event){})
24. (textbox, "change", function(event){})
25. (form, "submit", function(event){})
26. (form, "reset", handleSubmitEvent)
27. (#comments , "select", function(event){})
28. (textbox, "paste", function(event){})
29. (textbox, "select", function(event){})
30. (image, "error", function(event){})
    
    

JS-事件工具

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;
        }
    },
    
    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;
            }
        }
    },
    
    getCharCode: function(event){
        if (typeof event.charCode == "number"){
            return event.charCode;
        } else {
            return event.keyCode;
        }
    },
    
    getClipboardText: function(event){
        var clipboardData =  (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
    },
    
    getEvent: function(event){
        return event ? event : window.event;
    },
    
    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;
        }
    
    },
    
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    
    getWheelDelta: function(event){
        if (event.wheelDelta){
            return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
        } else {
            return -event.detail * 40;
        }
    },
    
    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    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;
        }
    },
    
    setClipboardText: function(event, value){
        if (event.clipboardData){
            event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData){
            window.clipboardData.setData("text", value);
        }
    },
    
    stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }

};

事件会传递

        var btn = document.getElementById("myBtn");
        btn.onclick = function(event){
            alert(event.eventPhase);   //2
        };
        document.body.addEventListener("click", function(event){
            alert(event.eventPhase);   //1
        }, true);
        document.body.onclick = function(event){
            alert(event.eventPhase);   //3
        };