javascript中事件概述

事件就是用户或浏览器自身执行的某种动作。诸如click、load、和mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以"on"开头，因此click事件的事件处理程序就是onclick，load事件的事件处理程序就是onload。

以下是跨浏览器的javascript中事件的相关方法:

//跨浏览器的方法
var EventUtil={
    /*
    与addHandler()对应的方法是removeHandler(),他们的职责分别是添加和移除事件处理程序；
    这两个方法首先都会检测传入的元素中是否存在DOM2级方法（所有DOM节点，IE9+、firefox、safari、chrome、opera都支持），如果存在则使用该方法：传入事件类型、事件处理程序函数和第三个参数false(表示冒泡阶段)；
    如果存在的是IE的方法，则采用第二种方案（IE及opera支持）；
    最后一种方案就是使用DOM0级方法（虽然现在浏览器支持，但应该都不会执行这里的代码，前面两种方案基本够了，且前面两种方案支持在一个元素上添加多个事件处理程序，而最一种方案只能添加一个事件处理程序）
    */
    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;
        }
    },
    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;
        }
    },
    //获取事件对象
    getEvent:function(event){
        return event?event:window.event;
    },
    //获取事件的目标
    getTarget:function(event){
        return event.target||event.srcElement;
    },
    //取消事件默认行为
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue=false;
        }
    },
    //阻止事件冒泡
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble=true;
        }
    },
    //获取鼠标滚轮增量值，当为120时表示向前滚动，当为-120时表示向后滚动
    getWheelDelta:function(event){
        if(event.wheelDelta){//兼容除firefox外的其他浏览器，event.wheelDelta为120时表示向前，当为-120时表示向后
            //return (client.engine.opera&&client.engine.opera<9.5?-event.wheelDelta:event.wheelDelta);
            return (window.opera&&window.opera.version()<9.5?-event.wheelDelta:event.wheelDelta);
        }else{//兼容firefox浏览器，在firefox中event.detail值为3表示向后滚动，为-3表示向前
            return -event.detail*40;
        }
    }
}

 

 

未完，待续。。。