JavaScript 跨瀏覽器新增移除事件

2021-07-28 19:29:51 字數 1867 閱讀 5704

那麼我們希望解決非ie 瀏覽器事件繫結哪些問題呢?

1.支援同一元素的同一事件控制代碼可以繫結多個監聽函式;

2.如果在同一元素的同一事件控制代碼上多次註冊同一函式,那麼第一次註冊後的所有註冊都被忽略;

3.函式體內的this 指向的應當是正在處理事件的節點(如當前正在執行事件控制代碼的節點);

4.監聽函式的執行順序應當是按照繫結的順序執行;

5.在函式體內不用使用event = event || window.event; 來標準化event 物件;

//跨瀏覽器新增事件

function

addevent

(obj,type,fn)else

}

//跨瀏覽器移除事件

function removeevent(obj,type,fn)else

}

這種方法可以使得同一元素的同一事件控制代碼繫結多個監聽函式、在函式體內也不必標準化event(事件)物件。

但是該方法的仍有不足,比如在ie瀏覽器下,事件處理函式體內this預設指向window、ie瀏覽器下,執行順序是倒序、ie瀏覽器下多次註冊同一函式不能被忽略。

為了解決this問題,可以使用call來冒充物件。

obj.attachevent('on' + type, function

() );

addevent(obutton, 'click', function

() );

但是使用call傳遞this,帶來另外的問題:無法標準化event、無法移除事件。

解決標準化event方法:

obj.attachevent('on' + type, function

() );

那麼最終有幾個問題無法解決:1.無法刪除事件;2.無法順序執行;3.ie 的現代事件繫結存在記憶體洩漏問題。

//跨瀏覽器新增事件繫結

function

addevent

(obj, type, fn) else ;

//建立存放事件處理函式的陣列

if (!obj.events[type])

//執行事件處理

obj['on' + type] = addevent.exec;

}else

//從第二個開始,通過計數器儲存

obj.events[type][addevent.id++] = fn; }}

addevent.array = function

(fn, es)

return

false;

}//每個事件處理函式的id 計數器

addevent.id = 1;

//事件處理函式呼叫

addevent.exec = function

(event)

};//獲取ie的event,相容w3c的呼叫

addevent.fixevent = function

(event) ;

//相容ie 和w3c 阻止預設行為

addevent.fixevent.preventdefault = function

() ;

//相容ie 和w3c 取消冒泡

addevent.fixevent.stoppropagation = function

() ;

//跨瀏覽器刪除事件

function

removeevent

(obj, type, fn) else

}}}

該方法解決了ie瀏覽器下無法刪除事件和執行順序的問題。

瀏覽器跨域

前端部分,簡單的封裝乙個promise版的ajax let myajax function headers else xhr.open method,path for let key,value of object.entries headers xhr.send body myajax heade...

瀏覽器跨域

同源策略 同源策略是乙個重要的安全策略,它用於限制乙個origin的文件或者它載入的指令碼如何能與另乙個源的資源進行互動。它能幫助阻隔惡意文件,減少可能被攻擊的媒介。協議 網域名稱 埠號 http伺服器,預設的埠號為80 tcp 木馬executor開放此埠 https securely trans...

javascript 跨瀏覽器的一些小技巧

用網頁調整格式實在是太複雜了,湊合看看吧。事件處理分為兩種,一種為冒泡型事件,另一種為捕獲型事件 冒泡型事件 是從特定目標到最不特定的目標 捕獲型事件 是從最不特定的物件開始觸發,一直到最精確的物件。dom標準同時支援兩種事件,並且捕獲型事件先發生。window document body div ...