生活随笔
收集整理的這篇文章主要介紹了
添加事件的兼容性写法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
通常，我們為某個控件元素添加事件時，用的是：
1 ele.οnclick=
fn1(){};
2 或者
3 ele.οnclick=fn1;
//此時不需要加括號，調用的是整個方法而不是return的結果
4 function fun1(){}
這種綁定事件的方法簡單高效，但對同一個控件的同一個動作進行綁定時，前面的事件容易被重疊。故需要對控件的事件進行監聽。
監聽的方法有兩種，分別為addEventListener和attachEvent。
? ? ? ? ? ele.addEventListener(type,listener,useCapture);共三個參數
| 參數 | ?參數說明 |
| ele | ?需要綁定的控件或是html結點 |
| type | ?觸發事件名稱。注意：需要去掉‘on’,為‘click’或者‘mouseover’等 |
| listener | ?事件的監聽函數，即要執行的方法。注意：在此，函數名不需要加()。因為不調用的是整個函數，而不是返回的結果。 |
| useCapture | 事件監聽方式，只能是true和false。 true，采用capture(捕獲模式:從外向內)； false，采用bubbling(冒泡模式：從內向外)。 如無特殊要求，一般是false。 |
?
?
?
?
?
?
?
?
?
是W3C所支持的事件綁定方法，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持該函數
1 //ele.addEventListener(type,listener,useCapture);
2 btn1.addEventListener("click",fn1,
false);
3 btn1.addEventListener("click",fn2,
false);
4 btn1.addEventListener("click",fn3,
false);
執行的順序是fn1-fn2-fn3
?
ele.attechEvent(type,function);
| 參數 | ?參數說明 |
| type | 觸發事件名稱。注意：不能去掉‘on’,為‘onclick’或者‘onmouseover’等 |
| function | 事件的監聽函數，即要執行的方法。同樣的不帶()。 |
?
? IE8.0及其以下版本（互補版本）
1 //ele.attachEvent(type,function);
2 btn1.attachEvent("onclick"
,fn1);
3 btn1.attachEvent("onclick"
,fn2);
4 btn1.attachEvent("onclick",fn3);
執行順序fn3-fn2-fn1
?
- 所以，采取這種事件的綁定及解綁的方法必須要采取兼容性的寫法：
封裝：（利用對象.屬性方法調用） 1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <button>賦詩</button>
9
10
11 <script>
12
13 var btn = document.getElementsByTagName("button")[0
];
14
15 EventListen =
{
16 addEvent:
function (ele,fn,str) {
17 //通過判斷調用的方式兼容IE678
18 //判斷瀏覽器是否支持該方法，如果支持那么調用，如果不支持換其他方法
19 if(ele.addEventListener){
20 //直接調用
21 //火狐谷歌IE9+支持addEventListener
22 ele.addEventListener(str,fn);
23 }
else if(ele.attachEvent){
24 //IE678支持attachEvent
25 ele.attachEvent("on"+
str,fn);
26 }
else{
27 //在addEventListener和attachEvent都不存在的情況下，用此代碼
28 ele["on"+str] =
fn;
29 }
30 },
31 removeEvent:
function (ele,fn,str) {
32 if(ele.removeEventListener){
33 ele.removeEventListener(str,fn);
34 }
else if(ele.detachEvent){
35 ele.detachEvent("on"+
str,fn);
36 }
else{
37 ele["on"+str] =
null;
38 }
39 }
40 };
41
42 // btn.addEventListener("click",fn);
43 EventListen.addEvent(btn,fn,"click"
);
44
45 EventListen.removeEvent(btn,fn,"click"
);
46
47 function fn(){
//定義fn函數
48 alert(1
);
49 }
50
51 </script>
52 </body>
53 </html>
?
以下內容為轉載內容
1 function addEvent(ele, type, fn, useCapture) {
2 if (ele.addEventListener) {
3 ele.addEventListener(type, fn, useCapture);
//DOM2.0
4 return true;
5 }
6 else if (ele.attachEvent) {
7 var r = ele.attachEvent(‘on‘ + type, fn);
//IE5+
8 return r;
9 }
10 else {
11 ele['on' + type] = fn;
//DOM 0
12 }
13 }
1 function addEvent(element, type, handler) {
2 //為每一個事件處理函數分派一個唯一的ID
3 if (!
handler.$$guid)
4 handler.$$guid = addEvent.guid++
;
5
6 //為元素的事件類型創建一個哈希表
7 if (!
element.events)
8 element.events =
{};
9
10 //為每一個"元素/事件"對創建一個事件處理程序的哈希表
11 var handlers =
element.events[type];
12 if (!
handlers) {
13 handlers = element.events[type] =
{};
14 //存儲存在的事件處理函數(如果有)
15 if (element["on" +
type]) {
16 handlers[0] = element["on" +
type];
17 }
18 }
19
20 //將事件處理函數存入哈希表
21 handlers[handler.$$guid] =
handler;
22
23 //指派一個全局的事件處理函數來做所有的工作
24 element["on" + type] =
handleEvent;
25 };
26
27 //用來創建唯一的ID的計數器
28 addEvent.guid = 1
;
29 function removeEvent(element, type, handler) {
30 //從哈希表中刪除事件處理函數
31 if (element.events &&
element.events[type]) {
32 delete element.events[type][handler.$$guid];
33 }
34 };
35 function handleEvent(event) {
36 var returnValue =
true;
37 //抓獲事件對象(IE使用全局事件對象)
38 event = event ||
fixEvent(window.event);
39 //取得事件處理函數的哈希表的引用
40 var handlers =
this.events[event.type];
41 //執行每一個處理函數
42 for (
var i
in handlers) {
43 this.$$handleEvent =
handlers[i];
44 if (
this.$$handleEvent(event) ===
false) {
45 returnValue =
false;
46 }
47 }
48 return returnValue;
49 };
50
51 //為IE的事件對象添加一些“缺失的”函數
52 function fixEvent(event) {
53 //添加標準的W3C方法
54 event.preventDefault =
fixEvent.preventDefault;
55 event.stopPropagation =
fixEvent.stopPropagation;
56 return event;
57 };
58 fixEvent.preventDefault =
function() {
59 this.returnValue =
false;
60 };
61 fixEvent.stopPropagation =
function() {
62 this.cancelBubble =
true;
63 };
功能非常強悍，解決IE的this指向問題，event總是作為第一個參數傳入，跨瀏覽器就更不在話下。
3.最后一個HTML5的版本：
1 var addEvent=(
function(){
2 if(document.addEventListener){
3 return function(el,type,fn){
4 if(el.length){
5 for(
var i=0;i<el.length;i++
){
6 addEvent(el[i],type,fn);
7 }
8 }
else{
9 el.addEventListener(type,fn,
false);
10 }
11 };
12 }
else{
13 return function(el,type,fn){
14 if(el.length){
15 for(
var i=0;i<el.length;i++
){
16 addEvent(el[i],type,fn);
17 }
18 }
else{
19 el.attachEvent(‘on‘+type,
function(){
return fn.call(el,window.event);});
20 }
21 };
22 }
23 })();
?
轉載于:https://www.cnblogs.com/zp0818/p/9236605.html
總結
以上是生活随笔為你收集整理的添加事件的兼容性写法的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
