javascript通用事件封裝

       隨着最近幾年Html5的興起，越來越多的應用采用html5進行實現，一個優秀的網頁應用不但需要美觀簡潔的UI界面，更需要一個良好的交互。網頁應用大部分的交互需要用javascript事件進行實現。雖然當前存在大量的且功能強大的javascript庫，但這些類庫或者框架都經過函數封裝，對於用戶而言隱藏了內部實現機制（雖然可以查看和研究源代碼，但是有多少童鞋能潛心研究呢？）。定制或者構建一個自己的小javascript庫，對於童鞋們提升前端開發水平來說，也具有重要的價值。

廢話不多說，下面給出一個通用的javascript事件工具庫，並通過注釋來了解原生的javascript用法：

//javascript通用事件封裝
var myEventUtil={
                //版本
                version:'1.0',
                //日期
                datetime:'2015-8-25',
                author:'jack Wang',
                //這里均用冒泡事件模型
                //添加事件函數,調用方法addEvent(btn1,'click',showmsg);
                addEvent:function(ele,event,func){
                    //用能力檢測進行跨瀏覽器兼容處理
                    //DOM 2 事件處理
                    if(ele.addEventListener)
                    {
                        //false表示冒泡事件模型
                        ele.addEventListener(event,func,false);
                    }
                    else if(ele.attachEvent)
                    {
                        //若是click事件,IE為onclick
                        ele.attachEvent('on'+event,func);
                    }
                    else
                    {
                        //DOM 0級事件，兼容老瀏覽器
                        //not ele.'on'+event=func;
                        //js中.可以用[]進行代替
                        ele['on'+event]=func;
                    }
                },
                //刪除事件函數
                delEvent:function(ele,event,func){
                    if(ele.removeEventListener)
                    {
                        ele.removeEventListener(event,func,false);
                    }
                    else if(ele.detachEvent){
                        ele.detachEvent('on'+event,func);//IE
                    }
                    else
                    {
                        //DOM 0級事件，兼容老瀏覽器
                        ele['on'+event]=null;
                    }
                },
                //獲取觸發事件的源DOM元素
                getSrcElement:function(event){
                    //如果event.target不為空，則返回event.target值
                    //否則返回event.srcElement
                    return event.target || event.srcElement;
                },
                //獲取事件類型
                getType:function(event)
                {
                    return event.type;
                },
                //獲取事件
                getEvent:function(event){
                    //window.event為兼容IE版本
                    return event?event:window.event;
                },
                //阻止事件冒泡
                stopBuble:function(event){
                    if(event.stopPropagation){
                        event.stopPropagation();
                    }
                    else{
                        event.cacelBuble=false;//IE
                    }
                },
                //禁用默認行為
                preventDefault:function(event){
                    if(event.preventDefault){
                        event.preventDefault();
                    }
                    else
                    {
                        event.returnValue=false;//IE為屬性
                    }
                },
                //根據元素ID名稱獲取元素
                $id:function(eleid){
                    return document.getElementById(eleid);
                },
                //根據ClassName獲取元素數組,提供父元素能提高檢索效率
                //用法：var eles=getByClass('foo');
                getByClass:function(className,parent){
                    //如果不提供parent，則返回頂級元素document
                    var oParent=parent?this.$id(parent):document;
                    //能力檢測
                    if(oParent.getElementsByClassName)
                    {
                        //通過在字符串中使用空格分隔類,也可以匹配多個類,
                        //下面的代碼挑選出了所有既擁有foo類名稱又擁有bar類名稱的元素:
                         //var eles = document.getElementsByClassName('foo bar');
                        return oParent.getElementsByClassName(className);
                    }
                    else
                    {
                        var retEles=[];
                        //獲取父元素下的所有子元素
                        var childs=oParent.getElementsByTagName('*');
                        for(var i=0,len=childs.length;i<len;i++){
                            //元素className類名匹配
                            if(childs[i].className==className){
                                retEles.push(childs[i]);
                            }
                        }
                        return retEles;
                   }
                },
                //根據ClassName獲取首元素
                getFirstByClass:function(className,parent){
                    //var eles=getByClass(className,parent);
                    //不加this.往往報getByClass未定義的錯誤
                    var eles=this.getByClass(className,parent);                
                    return eles[0];
                },
                //獲取版本信息
                getVersion:function(){
                    return 'Version:'+this.version;
                }

};

我們需要知其然，更需要知其所以然。只有這樣，才能更好的進行前端javascript開發。最后給大家推薦一個IT視頻學習網站：慕課