Javascript 内联事件处理程序和匿名函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4342124/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inline event handlers and anonymous functions
提问by Christophe
I have a need to dynamically include and run a script in a page. I am using an image onload event for this:
我需要在页面中动态包含和运行脚本。我为此使用图像加载事件：
<img src="blank.gif" onload="DoIt" />
The DoIt function looks like this (just made up this example):
DoIt 函数看起来像这样（只是组成了这个例子）：
this.onload=' ';this.src='image.jpg';
I have no control on the page itself (I only control the HTML string that the page will call), so I need to include the DoIt function explicitly in the markup.
我无法控制页面本身（我只控制页面将调用的 HTML 字符串），因此我需要在标记中明确包含 DoIt 函数。
I tried using an anonymous function, but it didn't work:
我尝试使用匿名函数，但没有用：
<img src="blank.gif" onload="function(){this.onload=' ';this.src='image.jpg';}" />
Should I just write the script inline, like this:
我是否应该直接编写内联脚本，如下所示：
<img src="blank.gif" onload="this.onload=' ';this.src='image.jpg';" />
And in this case are there any limitations (e.g. script length)?
在这种情况下是否有任何限制（例如脚本长度）？
Thanks for your help!
谢谢你的帮助！
回答by Ivo Wetzel
The thiswon't work inside the function since the function is called by the windowobject, therefore the thiswill refer to window.
该this不会在函数内部工作，因为函数被称为window对象，因此this将引用window。
If you want to wrap your code inside a function you must wrap that function, call it with the thisset to the element or pass the thisas a parameter:
如果你想把你的代码包装在一个函数中，你必须包装这个函数，用thisset调用它到元素或this作为参数传递：
<html>
<body>
<!-- call the function and set the this accordingly-->
<img src="foo.png" onload="(function(){...}).call(this)" />
<!-- pass the this as a parameter -->
<img src="foo.png" onload="(function(e){....})(this)" />
</body>
</html>
Yet this doesn't really make sense to me:
然而，这对我来说并没有真正意义：
I have no control on the page itself (I only control the HTML string that the page will call),
我无法控制页面本身（我只控制页面将调用的 HTML 字符串），
Do you only have control over the img tags? If you can output abritary HTML, then why not just put something in a `script' tag?
你只能控制 img 标签吗？如果你可以输出 abritary HTML，那么为什么不把一些东西放在一个 `script' 标签中呢？
Update
With a script block you could declare your function in there and then simply call it in the onload event.
更新
使用脚本块，您可以在其中声明您的函数，然后只需在 onload 事件中调用它。
<script>
function doIt(el) {
// code in here
console.log(el.id); // you could do stuff depending on the id
}
</script>
<img id="img1" src="foo.png" onload="doIt(this)" />
<img id="img2" src="foo.png" onload="doIt(this)" />
Now you need only one function for many images.
现在您只需要一个函数来处理许多图像。
And if you need to get really fancy, you can setup your script tag to pull in jQuery or any other library.
如果你真的需要变得很花哨，你可以设置你的脚本标签来引入 jQuery 或任何其他库。
<script src="somepathtojquery"></script>
<script>
// do jquery stuff in herep
If you need a lot of these handlers jQuery could do the job.
如果您需要大量这些处理程序，jQuery 可以完成这项工作。
Still I'm asking my self when you have full control over the HTML why don't you use a library in the first place? :)
我仍然问我自己，当您完全控制 HTML 时，为什么不首先使用库？:)
回答by David Tang
Try:
尝试：
<img src="blank.gif" onload="(function(el){el.onload=' ';el.src='image.jpg';})(this)" />
