BLOG
Enjoy when you can, and endure when you must.
NOV 22, 2012/JavaScript
一些JavaScript跨浏览器的事件处理函数积累

1.一个通用的事件处理函数:

    if (eventTarget.addEventListener) {
        eventTarget.addEventListener(eventType, eventHandler, false);
    } else if (eventTarget.attachEvent) {
        eventType = 'on' + eventType;
        eventTarget.attachEvent(eventType, eventHandler;
    } else {
        eventTarget['on' + eventType] = eventHandler;
    }
}

该函数接受三个参数:目标对象、事件的字符串和函数名称。

函数首先检测对象是否支持addEventListener(DOM2级事件监听方法),addEventListener接受三个参数,第一个为事件字符串,第二个为事件处理函数,第三个为布尔值,其中false指定事件冒泡、true指定事件捕获。

如果对象不支持addEventListener,则再次检测是否支持attachEvent(IE8及以前),该函数支持两个参数,第一个为事件字符串(必须以on前缀开始),第二个为事件处理函数。该函数不支持第三个参数,因为IE只支持事件冒泡。

如果前两种方法都不支持,则使用DOM0级事件处理。


2.Simon Willison创建的添加多个事件处理程序的方法:

    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

对于DOM2级事件监听器,每个库的函数都添加到了事件处理程序而不会覆盖之前存在的。


3.一个通用的事件取消函数:

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

preventDefault()方法阻止默认的行为发生,如果不支持该方法,将事件属性returnValue设置为false等同于从DOM 0级事件处理的函数返回false的做法。


   

4.一个通用的事件阻止函数:

    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = ture;
    }
}


以上内容来自:

JavaScript Cookbook

by Shelley Powers.

COMMENTS
LEAVE COMMNT