如何使用Prototype new Element（）構造函數添加事件處理函數？

我插入img標籤到我的新元素構造類似這樣的文件（這只是正常）：如何使用Prototype new Element（）構造函數添加事件處理函數？

$('placeholder').insert(new Element("img", {id:'something', src:myImage}))

我想觸發時，這個圖像加載功能，但我不能找出正確的語法。我猜這是這樣的（這是行不通的）。

$('placeholder').insert(new Element("img", 
    {id:'something', src:myImage, onload:function(){alert("MOO")}}))

我希望能夠在同一行代碼中執行此操作，而不必單獨附加事件觀察器。

編輯：事件需要當元素爲創建，沒有經過註冊。如果圖像在事件附加之前加載，事件將永遠不會觸發。

來源

2008-11-10 Diodeus - James MacFarlane

爲什麼你不想要兩行代碼？當然，這會讓事情變得更加清晰/可讀？ – mercutio 2008-11-10 20:20:20

因爲如果您將圖像插入第一行，那麼到達第二行時，由於圖像已經加載，附加事件爲時已晚。事件需要在元素創建時附加，而不是在之後。 – 2008-11-10 21:35:23

在這種情況下，最好的解決方案是不使用原型或至少不是唯一的。這工作：

var img = new Element('img',{id:'logo',alt:'Hooray!'}); 
img.onload = function(){ alert(this.alt); }; 
img.src = 'logo.jpg';

的關鍵是設置在onload，而不是直接讓Prototype的包裝爲你做，並設置src過去（其實不知道這一點，但我做的最後是安全的）。

單線被高估。通過正確使用局部變量，上述內容同樣適用。如果您必須擁有一行代碼，請創建一個包裝函數或破解Prototype核心以確保正確分配（提交補丁！）。

來源

2009-10-10 20:38:32 ColinM

您可能必須移動到別處的功能和名稱

$('placeholder').insert(new Element("img", 
    {id:'something', src:myImage, onload:"javascript:moo()"})) 

function moo() { 
    alert("MOO"); 
}

當然稱呼它，因爲insert返回元素，你可以內嵌Element.observe

$('placeholder').insert(new Element("img", 
    {id:'something', src:myImage})).observe('load', function(){alert("MOO")});

來源

2008-11-10 20:03:04 sblundy

爲什麼我需要onload：「javascript：moo（）」，唯一可以進入onload * IS * Javascript的東西。 – 2008-11-10 21:06:29

這實際上將工作（請參閱我的答案爲什麼原因）。在嘗試之前，不要冷靜下來。不過，「javascript：」前綴是完全不必要的。 – 2008-12-12 22:01:43

嘗試

$('placeholder').insert(new Element("img", { 
    id: 'something', 
    src:myImage 
}).observe('load', function() { 
    // onload code here 
}));

來源

2008-11-10 20:04:37

「onload」代碼不需要被封裝成事件處理程序。你基本上是在這裏加載元素，只需在插入後加入代碼即可。

var img = new Element('img', {id: 'something', src:'myImage.jpg'}); 
$('placeholder').insert(img); 
// Element has loaded! It can now be mucked around with. 
// The onload code goes here...

來源

2008-12-04 01:05:55 thoughtcrimes

它那種很爛，但是這是你需要做什麼：

$('placeholder').insert(new Element("img", { 
    id:'something', src:myImage, onload:'alert("MOO")' 
}));

在屬性的值對象只得到插入字符串，所以當你做「的onload：功能（）{...}」它會變成：

<img onload="function() {...}" />

實際上不執行函數裏面的代碼，它只是定義了一個新anonymo我們的功能不會執行，除非你告訴它。

如果你想成爲一個關於它的忍者，你可以做這樣的事情：

var moo = function() { alert("MOO"); }; 
$('placeholder').insert(new Element("img", { 
    id:'something', src:myImage, onload:'(' + moo + ')()' 
}));

甚至：

$('placeholder').insert(new Element("img", { 
    id:'something', src:myImage, onload:'(' + function() { alert("MOO"); } + ')()' 
}));

。雖然那種瘋狂，那些選項給你在需要的情況下使用實際的功能對象。

來源

2008-12-11 22:29:27

如何使用Prototype new Element（）構造函數添加事件處理函數？

回答

相關問題