快捷導(dǎo)航

js使用函數(shù)綁定技術(shù)改變事件處理程序的作用域

更新時(shí)間：2011年12月26日 23:46:20 作者：

在html頁面里面為某個(gè)元素的事件指定處理程序有很多種方式

第一種，也是最常見的，就是直接在html標(biāo)簽里面通過指定事件處理程序同名的HTML屬性來注冊事件，代碼如下：

 
function eventHandler() { 
alert("當(dāng)前作用域是 input 元素本身"); 
} 
<input type="button" value="單擊我" onclick="eventHandler(this)"/> 

第二種方式就是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩浴＿@種方式首先的獲取到這個(gè)元素對象，一般代碼如下：

復(fù)制代碼代碼如下:

 
<input id="myEventHandlerScope" type="button" value="單擊我"/> 
<script type="text/javascript"> 
function eventHandler() { 
alert("當(dāng)前作用域是 input 元素本身"); 
} 
var mybtn = document.getElementById("myEventHandlerScope"); 
mybtn.onclick = eventHandler; 
</script> 

第三種方式，就是理由DOM2級別的事件處理方法 addEventListener和removeEventListener，針對ie瀏覽器對應(yīng)的方法是attachEvent 和 detachEvent。注冊事件的代碼如下：

復(fù)制代碼代碼如下:

 
<input id="myEventHandlerScope" type="button" value="單擊我"/> 
<script type="text/javascript"> 
//定義一個(gè)注冊事件的方法 
function addHandler(obj, type, handler) { 
if (obj.addEventListener) { 
obj.addEventListener(type, handler, false); 
} else if (obj.attachEvent) { 
obj.attachEvent("on" + type, handler); 
} else { 
obj["on" + type] = handler; 
} 
} 
function eventHandler() { 
alert("當(dāng)前作用域是 input 元素本身"); 
} 
var mybtn = document.getElementById("myEventHandlerScope"); 
addHandler(mybtn,'click',eventHandler);//為對象注冊事件 
</script> 

input對象的Click事件執(zhí)行環(huán)境截圖
通過以上3種方式為input元素注冊一個(gè) click 事件處理程序都有一個(gè)缺點(diǎn)就是這個(gè)處理程序的作用域（this）始終處于input對象。在面向?qū)ο缶幊痰臅r(shí)候，就需要明確的指定this在特定的作用域下面。為了改變this的作用域，就得用到j(luò)s的一種綁定函數(shù)技術(shù)。
所謂“綁定函數(shù)”就是要?jiǎng)?chuàng)建一個(gè)函數(shù)，可以在特定環(huán)境中以指定參數(shù)調(diào)用另一個(gè)函數(shù)，他能很好的與事件處理程序一起使用，以便在將函數(shù)作為變量傳遞的同時(shí)保持函數(shù)的作用域（也是this的執(zhí)行環(huán)境）。綁定函數(shù)的定義形式如下代碼：

復(fù)制代碼代碼如下:

 
function bind(fn,scope) { 
return fn.apply(scope||this,arguments); 
} 

這個(gè)綁定函數(shù)接受兩個(gè)參數(shù)，第一個(gè)是需要執(zhí)行的函數(shù)，第二個(gè)是特定的執(zhí)行環(huán)境，并返回一個(gè)在給定作用域中調(diào)用給定函數(shù)，并將所有參數(shù)一同傳遞過去。利用綁定函數(shù)技術(shù)和DOM2級的事件處理程序就能很好的為元素注冊一個(gè)在特定作用域下執(zhí)行的事件處理函數(shù)。具體的處理方式如下：
首先修改先前定義的注冊事件的方法如下代碼：

復(fù)制代碼代碼如下:

 
function addHandler(obj, type, handler, scope) { 
function fn(event) { 
var evt = event ? event : window.event; 
evt.target = event.target || event.srcElement; 
return handler.apply(scope || this,arguments); 
} 
obj.eventHash = obj.eventHash || {};//這里為需要注冊事件處理程序的對象定義一個(gè)保存事件的hash對象，并把事件處理程序和作用域保存在該事件類型的隊(duì)列里面 
(obj.eventHash [type] = obj.eventHash [type] || []).push({ "name": type, "handler": handler, "fn": fn, "scope": scope }); 
if (obj.addEventListener) { 
obj.addEventListener(type, fn, false); 
} else if (obj.attachEvent) { 
obj.attachEvent("on" + type, fn); 
} else { 
obj["on" + type] = fn; 
} 
} 

使用修改后的注冊事件方法就可以使元素的事件處理程序在指定的環(huán)境里面執(zhí)行了。

復(fù)制代碼代碼如下:

 
<input id="myEventHandlerScope" type="button" value="單擊我"/> 
<script type="text/javascript"> 
function eventHandler() { 
this; 
alert("當(dāng)前作用域是 window 元素本身"); 
} 
var mybtn = document.getElementById("myEventHandlerScope"); 
addHandler(mybtn, 'click', eventHandler,window); 
</script> 

執(zhí)行上面這段代碼，處理程序eventHandler的this作用域就處在了window對象下面。

this在window對象下的執(zhí)行環(huán)境截圖

在前面介紹的通過綁定函數(shù)注冊事件是為元素對象創(chuàng)建了一個(gè)事件的hash對象用來保存事件處理程序，這個(gè)hash對象在元素移除事件處理程序的時(shí)候起到了非?？傄笥遥鶕?jù)他就能準(zhǔn)確的移除對應(yīng)的事件處理程序。移除事件處理程序的代碼如下：

復(fù)制代碼代碼如下:

 
function removeHandler (obj, type, handler, scope) { 
obj.eventHash = obj.eventHash || {}; 
var evtList = obj.eventHash [type] || [], len = evtList.length; 
if (len > 0) { 
for (; len--; ) { 
var curEvtObj = evtList[len]; 
if (curEvtObj.name == type && curEvtObj.handler === handler && curEvtObj.scope === scope) { 
if (obj.removeEventListener) { 
obj.removeEventListener(type, curEvtObj.fn, false); 
} else if (obj.detachEvent) { 
obj.detachEvent("on" + type, curEvtObj.fn); 
} else { 
obj["on" + type] = null; 
} 
evtList.splice(len, 1); 
break; 
} 
} 
} 
} 

到這里就介紹完了使用函數(shù)綁定技術(shù)注冊特定執(zhí)行環(huán)境的事件處理程序。同樣，利用函數(shù)綁定還能使回調(diào)函數(shù)在給定的執(zhí)行環(huán)境里面執(zhí)行。

本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責(zé)任的權(quán)利。

您可能感興趣的文章: