Question

可能重复：
The current element as its Event function param

这会有效吗

<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/

Answer 4

在JavaScript中 this 始终引用我们正在执行的函数的“所有者”，或者更确切地说，指向函数是其方法的对象。当我们在页面中定义忠实函数doSomething（）时，它的所有者是页面，或者说是JavaScript的窗口对象（或全局对象）。

How does the "this" keyword work?

将'this'传递给onclick事件

4 个答案: