将“this”传递给 onclick 事件 [重复]答案

【问题标题】：Passing 'this' to an onclick event [duplicate]将“this”传递给 onclick 事件 [重复]
【发布时间】：2012-10-10 06:00:55
【问题描述】：

可能重复：
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 以对任何页面元素执行操作？

【问题讨论】：

问某事会是否有效没有多大意义。更好地测试你自己的，并澄清你想使用的命令，你不确定。

标签： javascript html

【解决方案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>

【讨论】：

【解决方案2】：

您始终可以以不同的方式调用函数：foo.call(this); 这样您就可以在函数内部使用this 上下文。

例子：

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

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

【讨论】：

太棒了！这有什么缺点吗？

【解决方案3】：

是的，第一种方法适用于从其他地方调用的任何元素，因为它总是采用目标元素与 id 无关。

检查这个小提琴

http://jsfiddle.net/8cvBM/

【讨论】：

【解决方案4】：

在 JavaScript 中，this 总是指我们正在执行的函数的“所有者”，或者更确切地说，指的是函数作为方法的对象。当我们在页面中定义我们忠实的函数 doSomething() 时，它的所有者就是页面，或者更确切地说，是 JavaScript 的窗口对象（或全局对象）。

How does the "this" keyword work?

【讨论】：

this 是在调用时调用函数的对象。 javascript 中没有“所有者”的概念。如果在不使用对象的情况下调用函数，则this 是全局对象（浏览器中的window）。例如：function f(){ console.log(this); }; o={a:f}; o.a(); var b = o.a; b();