2012-11-30 56 views
1

這個問題出於好奇。我正在開發一個插件,並在爲其創建演示頁時遇到此問題。IE:通過DOM元素屬性綁定處理程序觸發onproperty更改

div元素像下面,

<div id="test">Test</div> 

,並像下面的處理函數,

function onPropChange() { 
    alert('Property changed for ' + window.event.srcElement.nodeName + 
      ' event ' + window.event.type); 

} 

現在試圖像下面的處理程序綁定,

document.getElementById('test').onpropertychange = onPropChange; 

在綁定,這觸發'propertychange'事件,因此處理程序被執行。

DEMO:http://jsfiddle.net/EEGcz/4/

有誰知道爲什麼嗎? 我使用IE8

細跟的attachEvent同樣的工作 - http://jsfiddle.net/maeRg/

+0

那麼......你正在改變一個屬性,爲什麼不呢?我猜這個任務是立即發生的,但事件只會在事件循環的下一個滴答聲中觸發(當您的處理程序已經綁定時)。 – bfavaretto

+0

@bfavaretto如果情況是這樣的話,那麼'attachEvent'的權利應該會發生同樣的情況。 –

+0

不,「obj.attachEvent」是一個函數調用。使用'obj.onpropertychange = ...',你直接改變了一個屬性。 – bfavaretto

回答

3

看那event.propertyName,你可以看到你的className是改變的特性在第二個例子,但第一個例子觸發事件通過附加到它使用test.onpropertychange而不是attachEvent的行爲。所以在第一個例子中,propertyName是「onpropertychange」。

嘗試此修改以查看第一種類型的事件綁定實際上是如何觸發事件本身的。

var i = 1; 
function onPropertyChange() { 
    alert('Property changed called ' + i++ + ' for ' + (window.event.propertyName)); 
    } 
var test = document.getElementById('test'); 
// play with commenting and uncommenting out the following two lines 
//test.onpropertychange = onPropertyChange; 
test.attachEvent("onpropertychange", onPropertyChange); 

test.className = 'test2'; 
相關問題