js實現(xiàn)自定義onclick,onmouseover等一系列瀏覽器特定行為的事件

1、詳解javascript實現(xiàn)自定義事件我們平時在操作dom時候經(jīng)常會用到onclick，onmouseover等一系列瀏覽器特定行為的事件，那么自定義事件，顧名思義，就是自己定義事件類型，自己定義事件處理函數(shù)，在合適的時候需要哪個事件類型，就去調(diào)用哪個處理程序1.js所支持的瀏覽器默認(rèn)事件瀏覽器特定行為的事件，或者叫系統(tǒng)事件，js默認(rèn)事件等等都行，大家知道我指的什么就行，下文我叫他js默認(rèn)事件。js默認(rèn)事件的事件綁定，事件移出等一系列操作，相信大家都有用到過，如：/DOM0級事件處理程序var oDiv = document.getElementById('oDiv');oDi

2、v.onclick = function()alert("你點擊了我");又或者/DOM2級事件處理程序var oDiv = document.getElementById('oDiv');/非ieoDiv.addEventListener("click",function()alert("你點擊了我");,false);/ieoDiv.attachEvent("onclick", function()alert("你點擊了我"););所有我就不做過多的研究，畢竟我們來討論js自

3、定義事件，這里給出一個我之前封裝過的處理js默認(rèn)事件的代碼：/跨瀏覽器的事件處理程序/調(diào)用時候直接用domEvent.addEvent( , , );直接調(diào)用/使用時候，先用addEvent添加事件，然后在handleFun里面直接寫其他函數(shù)方法，如getEvent；/addEventListener和attachEvent-都是dom2級事件處理程序var domEvent = /element:dom對象，event:待處理的事件，handleFun:處理函數(shù)/事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等addEvent:function(ele

4、ment,event,handleFun)/addEventListener-應(yīng)用于mozillaif(element.addEventListener)element.addEventListener(event,handleFun,false);/attachEvent-應(yīng)用于IEelse if(element.attachEvent)element.attachEvent("on"+event,handleFun);/其他的選擇dom0級事件處理程序else/element.onclick=element"on"+event;element&quo

5、t;on"+event = handleFun;,/事件名稱，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等removeEvent:function(element,event,handleFun)/removeEventListener-應(yīng)用于mozillaif (element.removeEventListener) element.removeEventListener(event,handleFun,false);/detachEvent-應(yīng)用于IEelse if (element.detachEvent) element.deta

6、chEvent("on"+event,handleFun);/其他的選擇dom0級事件處理程序else element"on"+event = null;,/阻止事件冒泡stopPropagation:function(event)if(event.stopPropagation)event.stopPropagation();elseevent.cancelBubble = true;/IE阻止事件冒泡，true代表阻止,/阻止事件默認(rèn)行為preventDefault:function(event)if(event.preventDefault)eve

7、nt.preventDefault();elseevent.returnValue = false;/IE阻止事件冒泡，false代表阻止,/獲得事件元素/event.target-非IE/event.srcElement-IEgetElement:function(event)return event.target | event.srcElement;,/獲得事件getEvent:function(event)return event? event : window.event;,/獲得事件類型getType:function(event)return event.type;接下類我們不如

8、正題，js自定義事件2.對象直接量封裝js自定義事件根據(jù)上面的封裝，我們可以這樣構(gòu)思var eventTarget = addEvent: function()/添加事件,fireEvent: function()/觸發(fā)事件,removeEvent: function()/移除事件;相信這樣大家還是比較好理解的，然后又有一個問題大家可以想到，那就是，js默認(rèn)事件，js可以一一對應(yīng)，知道那個是那個，那么我們的自定義事件呢，這個一一對應(yīng)的映射表只能我們自己去建立，然后我這樣var eventTarget = /保存映射handlers:,addEvent: function()/處理代碼,fire

9、Event: function()/觸發(fā)代碼,removeEvent: function()/移出代碼;我是這樣構(gòu)建這個映射關(guān)系的handlers = "type1":"fun1","fun2",/ ".","type2":"fun1","fun2"/ "."/"."這樣每一個類型可以有多個處理函數(shù)，以便于我們以后擴充接下來就是代碼方面的實戰(zhàn)的，編寫具體的處理代碼了相信大家對于這個思路已經(jīng)很清楚了，我直接附上代碼/直

10、接量處理js自定義事件var eventTarget = /保存事件類型，處理函數(shù)數(shù)組映射handlers:,/注冊給定類型的事件處理程序，/type -> 自定義事件類型， handler -> 自定義事件回調(diào)函數(shù)addEvent: function(type, handler)/判斷事件處理數(shù)組是否有該類型事件if(eventTarget.handlerstype = undefined)eventTarget.handlerstype = ;/將處理事件push到事件處理數(shù)組里面eventTarget.handlerstype.push(handler);,/觸發(fā)一個事件/e

11、vent -> 為一個js對象，屬性中至少包含type屬性，/因為類型是必須的，其次可以傳一些處理函數(shù)需要的其他變量參數(shù)。（這也是為什么要傳js對象的原因）fireEvent: function(event)/判斷是否存在該事件類型if(eventTarget.handlersevent.type instanceof Array)var _handler = eventTarget.handlers event.type;/在同一個事件類型下的可能存在多種處理事件，找出本次需要處理的事件for(var i = 0; i < _handler.length; i+)/執(zhí)行觸發(fā)_ha

12、ndleri(event);,/注銷事件/type -> 自定義事件類型， handler -> 自定義事件回調(diào)函數(shù)removeEvent: function(type, handler)if(eventTarget.handlerstype instanceof Array)var _handler = eventTarget.handlerstype;/在同一個事件類型下的可能存在多種處理事件，找出本次需要處理的事件for(var i = 0; i < _handler.length; i+)/找出本次需要處理的事件下標(biāo)if(_handleri = handler)bre

13、ak;/刪除處理事件_handler.splice(i, 1);這是一種調(diào)用運行的方法eventTarget.addEvent("eat",function()console.log(123); /123);eventTarget.fireEvent(type: "eat");這種方法有一個缺點，不能刪除該處理事件，因為我們是用映射表做的，而且也不提倡，直接給映射表里面存這么多數(shù)據(jù)，有點多。另一種方法，將處理事件提取出來（推薦）function b()console.log(123);eventTarget.addEvent("eat"

14、;,b);eventTarget.fireEvent(type: "eat"); /123eventTarget.removeEvent("eat",b);eventTarget.fireEvent(type: "eat"); /空也可以這樣，傳遞更多的參數(shù)eventTarget.fireEvent(type: "eat",food: "banana");function b(data)console.log(data.food); /banana總結(jié)：字面量這種方法，有點兒缺點，就是萬一一不小

15、心，把某個屬性在handler函數(shù)里面，賦值null，這樣會造成我們的的eventTarget 方法崩盤?？磥碓蛻?yīng)該是個好方法，更安全一點。3.對象原型封裝js自定義事件由于前面思路基本都講清楚了，這里我直接附上代碼，大家可以研究下其中的利弊，或許你可以找到更好的方法解決Ta/自定義事件構(gòu)造函數(shù)function EventTarget()/事件處理程序數(shù)組集合this.handlers = ;/自定義事件的原型對象EventTtotype = /設(shè)置原型構(gòu)造函數(shù)鏈constructor: EventTarget,/注冊給定類型的事件處理程序，/type -> 自定義事

16、件類型， handler -> 自定義事件回調(diào)函數(shù)addEvent: function(type, handler)/判斷事件處理數(shù)組是否有該類型事件if(typeof this.handlerstype = 'undefined')this.handlerstype = ;/將處理事件push到事件處理數(shù)組里面this.handlerstype.push(handler);,/觸發(fā)一個事件/event -> 為一個js對象，屬性中至少包含type屬性，/因為類型是必須的，其次可以傳一些處理函數(shù)需要的其他變量參數(shù)。（這也是為什么要傳js對象的原因）fireEvent

17、: function(event)/模擬真實事件的eventif(!event.target)event.target = this;/判斷是否存在該事件類型if(this.handlersevent.type instanceof Array)var handlers = this.handlersevent.type;/在同一個事件類型下的可能存在多種處理事件，找出本次需要處理的事件for(var i = 0; i < handlers.length; i+)/執(zhí)行觸發(fā)handlersi(event);,/注銷事件/type -> 自定義事件類型， handler -> 自定義事件回調(diào)函數(shù)removeEvent: function(type, handler)/判斷是否存在該事件類型if(this.handlerstype instanceof Array)var handlers = this.handlerstype;/在同一個事件類型下的可能存在多種處理事件for(var