Question

我正在使用新的Element构造函数将img标记插入到我的文档中（这样可以正常工作）：

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

我想在这个图像加载时触发一个函数，但我无法弄清楚正确的语法。我猜它是这样的（这不起作用）。

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

我希望在同一行代码中执行此操作，而不必单独附加事件观察器。

编辑：元素创建时需要注册，而不是之后。如果在附加事件之前加载图像，则事件将永远不会触发。

Answer 1

在这种情况下，最好的解决方案是不使用Prototype，或者至少不使用Prototype。这有效：

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

关键是直接设置onload而不是让Prototype的包装器为你做，并设置src最后（实际上不确定，但我最后是安全的）。

单线被高估了。通过正确使用局部变量，上述情况也同样出色。如果你必须有一个单行程序，创建一个包装函数或破解原型核心以确保正确分配（提交补丁！）。

Answer 2

尝试

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

Answer 3

您可能必须将该功能移至其他位置并按名称调用

$('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")});

Answer 4

“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...

Answer 5

这很糟糕，但这就是你需要做的事情：

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

属性对象中的值只是作为字符串插入，所以当你执行“onload：function（）{...}”时，它会变成：

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

实际上并没有执行函数内部的代码，只是定义了一个新的匿名函数，除非你告诉它，否则它不会执行。

如果你想成为一名忍者，你可以这样做：

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"); } + ')()'
}));

虽然有点疯狂，但这些选项会为您提供实际的功能对象，以备您需要时使用。

如何使用Prototype new Element（）构造函数添加事件处理程序？

5 个答案: