JS事件程式處理

1、事件：使用者/瀏覽器自身執行的某種動作（點選click、載入load,頁面滾動scroll的等）；

2、事件處理程式：響應某個事件的處理函式，又叫事件偵聽器

事件流

1、事件冒泡由ie提出由下向上 2、事件捕獲由netscape團隊提出由上向下由於老版本瀏覽器不支援，所以很少使用 3、dom事件流 dom2級事件分為三個階段：事件捕獲階段、處於目標階段、事件冒泡階段

ie8及更早版本不支援，目前最常用的事件流

1行

三種方式

方式一 dom0級方法

var ele = document.getelementsbytagname('li')[0];
// 繫結
ele.onclick = function (event) ;
// 同時給乙個元素相同事件繫結兩個事件處理函式時，後面的**會覆蓋前面的
ele.onclick = function (event) ;
// 解綁
ele.onclick = null;

這種方式不能同時繫結多個事件

方式二 dom2級方法

addeventlistener與removeeventlistener

function handler1(event) 
function handler2(event) 
// 三個引數          1.乙個/多個事件 2.事件處理函式 3.響應階段(捕獲階段:true, 冒泡階段:false 一般使用false)
ele.addeventlistener('click', handler1, false);
// 同時為同乙個元素的同乙個事件繫結多個處理函式時，不會覆蓋，會按照繫結順序執行
ele.addeventlistener('click', handler2, false);
// 解綁 三個引數必須和繫結時保持一致才可以解綁
ele.removeeventlistener('click', handler1, false);

注：1、解綁函式的引數必須和繫結時的引數保持一致才能解綁； 2、所以最好不要使用匿名函式，不然解綁不了； 3、同時為同乙個元素的同乙個事件繫結多個處理函式時，不會覆蓋，會按照繫結順序執行。

方式三 ie （ie8以前只支援這種冒泡方式）

attachevent與detachevent

// 繫結 兩個引數 1.on'事件' 2.事件處理函式
ele.attachevent('onclick', handler1);
ele.attachevent('onclick', handler2);
// 解綁
ele.detachevent('onclick', handler1);

注：1、解綁函式的引數必須和繫結時的引數保持一致才能解綁； 2、所以最好不要使用匿名函式，不然解綁不了； 3、同時為同乙個元素的同乙個事件繫結多個處理函式時，不會覆蓋，會按照繫結順序相反的順序執行。4、this不指定事件目標而是指向window，event物件和前兩種的event構成也不一樣

var handler = function(event) 
// 封裝相容事件繫結程式
var eventutil =  else if(element.attachevent)  else 
},// 解綁處理
removehandler: function (element, type, handler)  else if(element.detachevent)  else 
},// 獲取事件物件
getevent: function (event) ,
// 獲取事件目標元素
gettarget: function (event) ,
// 阻止特定事件的預設行為
preventdefault: function (event)  else 
},// 阻止冒泡
stoppropagation: function (event)  else 
}};// 呼叫
eventutil.addhandler(ele, 'click', handler);
eventutil.removehandler(ele, 'click', handler);

event

主流瀏覽器event

ie8以下window.event

事件處理函式正在處理的元素

event.currenttarget

事件發生在的具體元素

event.target

event.srcelement

阻止特定事件的預設行為

event.preventdefault()

event.returnvalue = false

阻止事件冒泡

event.stoppropagation()

event.canclebubble = true

event.eventphase 判斷事件處理函式執行時，元素處於的階段

1：在捕獲階段

2：在目標物件上

3：冒泡階段

event.eventphase = 2 時，this=event.currenttarget = event.target

解決問題：如果頁面上所有需要繫結事件的元素都單個繫結相應的事件處理程式，1、那麼將會繫結很多單獨的程式，全域性記憶體占用很多，影響頁面效能，2、訪問dom次數太多，延遲頁面互動就緒時間

原理：利用事件冒泡，為頂級頁面元素或者模組中最頭部元素指定事件處理函式

html:

js:

var ele = document.getelementbyid('box');
eventutil.addhandler(ele, 'click', function (event) 
break;
case 'list':
break;
case 'one':
break;
case 'two':
break;
case 'three':
break;
default: break;
}});

JS事件程式處理

JS事件事件處理程式之IE事件處理程式

JS 事件流與事件處理程式

JS基礎事件事件處理程式

JS事件程式處理

JS事件 事件處理程式之IE事件處理程式

JS 事件流與事件處理程式

JS基礎 事件 事件處理程式

相關推薦

JS事件事件處理程式之IE事件處理程式

JS基礎事件事件處理程式