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

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

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

3、定義事件，這里給出一個(gè)我之前封裝過(guò)的處理js默認(rèn)事件的代碼：/跨瀏覽器的事件處理程序/調(diào)用時(shí)候直接用domEvent.addEvent( , , );直接調(diào)用/使用時(shí)候，先用addEvent添加事件，然后在handleFun里面直接寫(xiě)其他函數(shù)方法，如getEvent；/addEventListener和attachEvent-都是dom2級(jí)事件處理程序var domEvent = /element:dom對(duì)象，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級(jí)事件處理程序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級(jí)事件處理程序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.對(duì)象直接量封裝js自定義事件根據(jù)上面的封裝，我們可以這樣構(gòu)思var eventTarget = addEvent: function()/添加事件,fireEvent: function()/觸發(fā)事件,removeEvent: function()/移除事件;相信這樣大家還是比較好理解的，然后又有一個(gè)問(wèn)題大家可以想到，那就是，js默認(rèn)事件，js可以一一對(duì)應(yīng)，知道那個(gè)是那個(gè)，那么我們的自定義事件呢，這個(gè)一一對(duì)應(yīng)的映射表只能我們自己去建立，然后我這樣var eventTarget = /保存映射handlers:,addEvent: function()/處理代碼,fire

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

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

11、vent -> 為一個(gè)js對(duì)象，屬性中至少包含type屬性，/因?yàn)轭愋褪潜仨毜?，其次可以傳一些處理函?shù)需要的其他變量參數(shù)。（這也是為什么要傳js對(duì)象的原因）fireEvent: function(event)/判斷是否存在該事件類型if(eventTarget.handlersevent.type instanceof Array)var _handler = eventTarget.handlers event.type;/在同一個(gè)事件類型下的可能存在多種處理事件，找出本次需要處理的事件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;/在同一個(gè)事件類型下的可能存在多種處理事件，找出本次需要處理的事件for(var i = 0; i < _handler.length; i+)/找出本次需要處理的事件下標(biāo)if(_handleri = handler)bre

13、ak;/刪除處理事件_handler.splice(i, 1);這是一種調(diào)用運(yùn)行的方法eventTarget.addEvent("eat",function()console.log(123); /123);eventTarget.fireEvent(type: "eat");這種方法有一個(gè)缺點(diǎn)，不能刪除該處理事件，因?yàn)槲覀兪怯糜成浔碜龅?，而且也不提倡，直接給映射表里面存這么多數(shù)據(jù)，有點(diǎn)多。另一種方法，將處理事件提取出來(lái)（推薦）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é)：字面量這種方法，有點(diǎn)兒缺點(diǎn)，就是萬(wàn)一一不小

15、心，把某個(gè)屬性在handler函數(shù)里面，賦值null，這樣會(huì)造成我們的的eventTarget 方法崩盤(pán)?？磥?lái)原型應(yīng)該是個(gè)好方法，更安全一點(diǎn)。3.對(duì)象原型封裝js自定義事件由于前面思路基本都講清楚了，這里我直接附上代碼，大家可以研究下其中的利弊，或許你可以找到更好的方法解決Ta/自定義事件構(gòu)造函數(shù)function EventTarget()/事件處理程序數(shù)組集合this.handlers = ;/自定義事件的原型對(duì)象EventTtotype = /設(shè)置原型構(gòu)造函數(shù)鏈constructor: EventTarget,/注冊(cè)給定類型的事件處理程序，/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ā)一個(gè)事件/event -> 為一個(gè)js對(duì)象，屬性中至少包含type屬性，/因?yàn)轭愋褪潜仨毜?，其次可以傳一些處理函?shù)需要的其他變量參數(shù)。（這也是為什么要傳js對(duì)象的原因）fireEvent

17、: function(event)/模擬真實(shí)事件的eventif(!event.target)event.target = this;/判斷是否存在該事件類型if(this.handlersevent.type instanceof Array)var handlers = this.handlersevent.type;/在同一個(gè)事件類型下的可能存在多種處理事件，找出本次需要處理的事件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;/在同一個(gè)事件類型下的可能存在多種處理事件for(var