解決順序問題:我們不用瀏覽器自帶的事件池了,而是自己模擬標準瀏覽器的事件池實現,具體**如下:
/*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,就是...