JavaScript 事件处理机制总结

JavaScript 事件总结

事件处理机制

JS的事件处理机制由事件捕获和事件冒泡之说。其中逻辑方式刚好相反。

• 事件捕获表示越宽泛的节点越先接收到事件
• 事件冒泡表示越细节的节点越先接收到事件，然后慢慢冒泡的方式冒出去

事件处理机制 多浏览器通用代码

通过EvenUtil的方式，可以将所有的事件和HTML组件包含进去，通过统一的方式去处理各种事件。

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;
        }
    }

};

JS支持事件的简单总结

UI: 
    onload
	unload
	resize
	scroll
焦点： 
	  blur:不冒泡
	  DOMFocusIn
	  DOMFocusOut
	  focus：不冒泡
	  focusin
	  focusout
鼠标与滚轮事件：
	  click
	  dblclick
	  mousedown
	  mouseenter:不冒泡
	  mouseleave：不冒泡
	  mousemove
	  mouseout
	  mouseover
	  mouseup
	  mousewheel
键盘与文本事件：
	  keydown
	  keypress：任意可获得焦点的地方
	  keyup
	  textinput: 只有可编辑区域才能触发textinput
复合事件：
	 输入法使用较多，但是已经被弃用了。只有在特殊场景下才需要。
变动事件：在DOM中的某一部分发生变动时给出提示。
HTML5事件： 
	contextmenu事件：下拉菜单唤出
	beforeunload事件：让页面卸载前阻止这一操作
	DOMContentLoaded事件： DOM树加载完成后出发，其它资源无所谓
	readyStatechange事件：
	pageshow和pagehide事件：在页面显示或隐藏时出发（因为前进后退时，页面保存在内存中，不load，但show或者hide）。
	hashchange事件：检测url参数列表后面的字符串。
设备事件：
	orientationchange事件：翻转时
	MozOrientation事件：当设备加速度计检测到方向改变时
	deviceorientation事件：
	devicemotion:
触摸与手势事件:
	touchstard
	touchmove
	touchend
	touchcancel
	getturestart
	gesturechange
	gestureend

内存和性能

为了减小浏览器的体积和所占用的内存，可以通过如下的方式来优化性能。

• 事件委托的方式减小代码量，将同样的监听事件包含不同的操作。
• 可以通过移除事件处理程序来减小内存： btn.onclick = null;