js學習總結 DOM2相容處理順序問題

2022-07-12 23:18:21 字數 1841 閱讀 9082

解決順序問題:我們不用瀏覽器自帶的事件池了,而是自己模擬標準瀏覽器的事件池實現,具體**如下:

/*

bind:處理dom2級事件繫結的相容性問題(繫結方法)

@parameter:

curele->要繫結事件的元素

eventype->要繫結的事件型別("click","mouseover")

evenfn->要繫結的方法

*/function

bind(curele,eventype,evenfn)

//給evenfn化妝 並且把化妝前的**貼在自己對應的腦門上

var tempfn = function

() tempfn.photo =evenfn;

//首先判斷自定義屬性之前是否存在,不存在的話建立乙個,由於要儲存多個化妝後的結果,所以我們讓其值是乙個陣列

if(!curele["mybind"+eventype])

//解決重複問題:每一次自己在往自定義屬性對應的容器中新增前,看一下是否已經存在,存在的話就不用重新的新增了,同理也不需要往事件池裡面儲存了

var ary = curele["mybind"+eventype];

for(var i = 0;i)

}ary.push(tempfn);

curele.attachevent("on"+eventype,tempfn);

//這裡的開始想法是改變this的指向,把this不指向window

/*box.attachevent("onclick",function())

這樣雖然解決了this的問題,但是又丟擲了乙個新的問題,不知道該如何刪除了(我們不知道匿名函式是誰)

var tempfn = function()

box.attachevent("onclick",tempfn);

box.detachevent("onclick",tempfn);

*/}function

unbind(curele,eventype,evenfn)

//拿evenfn到curele["mybind"]這裡找化妝後的結果,找到之後再事件池中把化妝後的結果移除事件池

var ary = curele['mybind'+eventype];

for(var i = 0;i)

}}//

建立事件池,並且把需要給當前元素繫結的方法依次的增加到事件池中

function

on(curele,eventype,evenfn)

var ary = curele["myevent"+eventype];

for(var i = 0;i)

}ary.push(evenfn);

//執行on的時候,我們給當前元素繫結了乙個點選的行為,當點選的時候執行run方法:run方法中的this是當前元素curele,並且瀏覽器給run傳遞乙個mouseevent事件物件

bind(curele,eventype,run)}//

在自己的事件池中把某乙個方法移除

function

off(curele,eventype,evenfn)

}}//

我們只給當前元素的點選行為繫結乙個方法run,當觸發點選的時候執行的是run方法,我在run方法中根據自己儲存的方法順序分別的在把這些方法執行

function

run(e)

//獲取自己事件池中繫結的那些方法,並且讓這些方法依次的執行就可以了

var ary = this["myevent"+e.type];//

e.target也代表curele

for(var i = 0;i)

}

DOM2級事件處理程式詳解以及相容性寫法

doctype html en utf 8 document1 title a.b style head a b div div var a document.getelementsbytagname div 0 var b document.getelementsbytagname div 1 這...

JS學習總結(二) Dom程式設計

1.關於dom document object model 文件物件模型 多用來處理和表示html和xml文件。dom是針對xml html的基於樹的api。dom樹定義了節點node的介面以及許多節點型別來表示文件不同功能不同方面的節點。dom結構理解為樹型結構,節點就是樹枝分叉處的那個點。2.j...

DOM2 Style 學習總結

dom2 style 也叫dom2 css,是w3c dom2級規範的成員。提供了訪問和操作所有與css相關的樣式及規則的能力。cssstylesheet物件 通過 document.stylesheets 訪問到cssstylesheet的集合。其中每乙個元素是乙個cssstylesheet,就是...