将'this'传递给onclick事件

Question

可能重复:
当前元素作为其事件函数参数

这会有用吗？

<script type="text/javascript">
var foo = function(param)
{
    param.innerHTML = "Not a button";
};
</script>
<button onclick="foo(this)" id="bar">Button</button>

而不是这个？

<script type="text/javascript">
var foo = function()
{
    document.getElementId("bar").innerHTML = "Not a button";
};
</script>
<button onclick="foo()" id="bar">Button</button>

并且第一种方法是否允许我从其他地方加载javascript以对任何页面元素执行操作？

Answer 1

您拥有的代码可以使用,但是从全局上下文执行,这意味着它this引用了全局对象.

<script type="text/javascript">
var foo = function(param) {
    param.innerHTML = "Not a button";
};
</script>
<button onclick="foo(this)" id="bar">Button</button>

您还可以使用非内联替代方法,该方法附加到特定元素上下文并从中执行,允许您从中访问元素this.

<script type="text/javascript">
document.getElementById('bar').onclick = function() {
    this.innerHTML = "Not a button";
};
</script>
<button id="bar">Button</button>

Answer 2

您总是可以以不同foo.call(this);方式调用this函数:这样您就可以在函数内部使用上下文.

例:

<button onclick="foo.call(this)" id="bar">Button</button>?

var foo = function()
{
    this.innerHTML = "Not a button";
};

Answer 3

是的第一种方法将适用于从其他地方调用的任何元素,因为无论id如何,它总是会占用目标元素.

检查这个小提琴

http://jsfiddle.net/8cvBM/