javascript 事件处理示例分享

废话少说，直接奉上示例代码：


代码如下:


<script type="text/javascript">
    function EventUtil() {
        var _self = this;
        ///添加事件
        var addEvent = (function () {
            if (document.addEventListener) {
                return function (el, type, fn) {
                    el.addEventListener(type, fn, false);
                }
            } else {
                return function (el, type, fn) {
                    el.attachEvent("on" + type, function () {
                        return fn.call(el, window.event);
                    });
                }
            }
        })();
        ///添加属性改变事件
        var addPropertyChangeEvent = function (obj, fn) {
            if (window.ActiveXObject) {
                obj.onpropertychange = fn;
            } else {
                obj.addEventListener("input", fn, false);
            }
        }
        //移除事件
        var removeEvent = function (obj, type, fn) {
            if (obj.removeEventListener) {
                obj.removeEventListener(type, fn, false);
            } else if (obj.detachEvent) {
                obj.detachEvent("on" + type, obj["on" + type + fn]);
                obj["on" + type + fn] = null;
            }
        }
        //加载事件
        var loadEvent = function (fn) {
            var oldonload = window.onload;
            if (typeof oldonload != "function") {
                window.onload = fn;
            } else {
                window.onload = function () {
                    oldonload();
                    fn();
                }
            }
        }
        //阻止事件
        var stopEvent = function (e) {
            e = e || window.event;
            if (e.preventDefault) {
                e.preventDefault();
                e.stopPropagation();
            } else {
                e.returnValue = false;
                e.cancelBubble = true;
            }
        }
        //如果仅仅是阻止事件冒泡
        var stopPropagation = function (e) {
            e = e || window.event;
            if (!+"v1") {
                e.cancelBubble = true;
            } else {
                e.stopPropagation();
            }
        }
        //取得事件源对象
        var getEvent1 = function (e) {
            e = e || window.event;
            var obj = e.srcElement ? e.srcElement : e.target;
            return obj;
        }
        //取得事件源对象
        var getEvent2 = function (e) {
            if (window.event) return window.event;
            var c = getEvent2.caller;
            while (c.caller) {
                c = c.caller;
            }
            return c.arguments[0];
        }
        //或者这个功能更强大
        var getEvent3 = function (e) {
            var e = e || window.event;
            if (!e) {
                var c = this.getEvent3.caller;
                while (c) {
                    e = c.arguments[0];
                    if (e && (Event == e.constructor || MouseEvent == e.constructor)) {
                        break;
                    }
                    c = c.caller;
                }
            }
            var target = e.srcElement ? e.srcElement : e.target,
                    currentN = target.nodeName.toLowerCase(),
                    parentN = target.parentNode.nodeName.toLowerCase(),
                    grandN = target.parentNode.parentNode.nodeName.toLowerCase();
            return [e, target, currentN, parentN, grandN];
        }

        _self.addEvent = addEvent;         _self.addPropertyChangeEvent = addPropertyChangeEvent;         _self.removeEvent = removeEvent;         _self.loadEvent = loadEvent;         _self.stopEvent = stopEvent;         _self.stopPropagation = stopPropagation;         _self.getEvent1 = getEvent1;         _self.getEvent2 = getEvent2;         _self.getEvent3 = getEvent3;     }     var eventUtil = new EventUtil();     eventUtil.loadEvent(function () {         eventUtil.addEvent(document, "click", function (e) {             alert(eventUtil.getEvent3(e));         });         eventUtil.addPropertyChangeEvent(document,function(e){             alert(eventUtil.getEvent3(e));         });     }); </script>


javascript事件处理分为三个阶段：捕获 - 处理 - 起泡。
以点击按钮为例： 捕获阶段：由外层到内层，首先调用给Window注册的click捕获阶段监听方法，然后document、body、一层层的父节点，一直到按钮本身。
处理阶段：调用按钮本身的click监听方法。
起泡阶段：从按钮开始，从内层到外层，依次调用各级父节点的起泡阶段监听方法，直到Window。
但是，对于IE8及更低版本IE，不支持捕获阶段，因此捕获阶段的事件监听目前尚不通用。
通常的事件处理方法形式为：


代码如下:


function eventHandler(e) { 
    e = e || window.event; 
    var target = e.target || e.srcElement; 
    ... ... 
     
} 



e为事件对象，当事件触发时，作为参数传进来，但对于IE8及更低版本IE不适用，只能通过全局的event变量访问，好在不会出现同时处理两个事件的情况。


有用  |  无用 取消

猜你喜欢