事件监听绑定函数

// eventType为不含"on"的事件类型
var bind = function(ele, eventType, callback) {
    if(ele.addEventListener) {
        // W3C标准写法
        return ele.addEventListener(eventType, callback, false);
    }else if(ele.attachEvent) {
        // 兼容IE6~8
        return ele.attachEvent(eventType, callback);
    }else {
        // 兼容IE5-
        return ele["on" + eventType] = callback;
    }
}

事件监听解绑函数

// eventType为不含"on"的事件类型
var unbind = function(ele, eventType, callback) {
    if(ele.removeEventListener) {
        // W3C标准写法
        return ele.removeEventListener(eventType, callback, false);
    }else if(ele.detachEvent) {
        // 兼容IE6~8
        return ele.detachEvent(eventType, callback);
    }else {
        // 兼容IE5-
        return ele["on" + eventType] = null;
    }
}

重写window.onload为可多次追加的函数

var addLoadEvent = function(callback) {
    var oldOnLoad = window.onload;
    if(type window.onload != "function") {
        window.onload = callback;
    }else {
        window.onload = function() {
            if(oldOnLoad) {
                oldOnLoad();
            }
            callback();
        }
    }
}

获取鼠标点击事件的坐标位置

screenX: 鼠标位置相对于用户屏幕水平偏移量,参照点也就是原点是屏幕的左上角;

PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化;

clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.

常见的JavaScript获取元素位置的API:

function getPosition(e) {
    // 访问事件对象
    var e = e || window.event;

    // 声明x、y分别为鼠标相对于文档的位置
    var x = 0, y = 0;

    // 针对W3C标准浏览器具有pageX/Y属性
    if(e.pageX) {
        x = e.pageX;
        y = e.pageY;
    }else if(e.clientX) {
        // 在IE6~8中不支持pageX,而是用clientX;但clientX只是相对屏幕视口的横坐标,不包含滚动宽度;
        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        // pageX = clientX + scrollX
        x = e.clientX + scrollLeft;
        y = e.clientY + scrollTop;
    }
    return [x, y];
}

取消默认事件发生

function cancelEvent(event) {
    if(event.preventDefault) {
        e.preventDefault();
    }else {
        // 兼容IE6~8
        event.returnValue = false;
    }
}

防止事件在嵌套元素中传播

有一个元素嵌套在另一个元素中,他们都捕获点击事件。如果想阻止事件传播,可以使用stopPropagation()函数,在IE6~8中则可以使用cancelBubble = boolean来实现。

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

获取键盘事件

function keyCode(e) {
    // 访问事件对象
    var e = e || window.event;
    var key = e.keyCode || e.charCode;
    return key;
}
本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/js/366