将'this'传递给onclick事件[duplicate]

时间:2023-02-09 15:10:32

Possible Duplicate:
The current element as its Event function param

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

Would this work

将这项工作

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

rather than this?

而不是这个吗?

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

And would the first method allow me to load the javascript from elsewhere to perform actions on any page element?

第一个方法允许我从其他地方加载javascript来对任何页面元素执行操作吗?

4 个解决方案

#1


28  

The code that you have would work, but is executed from the global context, which means that this refers to the global object.

您拥有的代码将会工作,但是会在全局上下文中执行,这意味着它引用全局对象。

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

You can also use the non-inline alternative, which attached to and executed from the specific element context which allows you to access the element from this.

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

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

#2


15  

You can always call funciton differently: foo.call(this); in this way you will be able to use this context inside the function.

你可以用不同的方式调用funciton: foo.call(这个);通过这种方式,您将能够在函数中使用这个上下文。

Example:

例子:

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

<按钮onclick = " foo.call(这)" id="棒"> < /按钮>按钮

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

#3


5  

Yeah first method will work on any element called from elsewhere since it will always take the target element irrespective of id.

是的,first方法将对任何从别处调用的元素起作用,因为它总是取目标元素而不考虑id。

check this fiddle

检查这个小提琴

http://jsfiddle.net/8cvBM/

http://jsfiddle.net/8cvBM/

#4


3  

In JavaScript this always refers to the “owner” of the function we're executing, or rather, to the object that a function is a method of. When we define our faithful function doSomething() in a page, its owner is the page, or rather, the window object (or global object) of JavaScript.

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

How does the "this" keyword work?

这个关键字是如何工作的?

#1


28  

The code that you have would work, but is executed from the global context, which means that this refers to the global object.

您拥有的代码将会工作,但是会在全局上下文中执行,这意味着它引用全局对象。

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

You can also use the non-inline alternative, which attached to and executed from the specific element context which allows you to access the element from this.

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

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

#2


15  

You can always call funciton differently: foo.call(this); in this way you will be able to use this context inside the function.

你可以用不同的方式调用funciton: foo.call(这个);通过这种方式,您将能够在函数中使用这个上下文。

Example:

例子:

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

<按钮onclick = " foo.call(这)" id="棒"> < /按钮>按钮

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

#3


5  

Yeah first method will work on any element called from elsewhere since it will always take the target element irrespective of id.

是的,first方法将对任何从别处调用的元素起作用,因为它总是取目标元素而不考虑id。

check this fiddle

检查这个小提琴

http://jsfiddle.net/8cvBM/

http://jsfiddle.net/8cvBM/

#4


3  

In JavaScript this always refers to the “owner” of the function we're executing, or rather, to the object that a function is a method of. When we define our faithful function doSomething() in a page, its owner is the page, or rather, the window object (or global object) of JavaScript.

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

How does the "this" keyword work?

这个关键字是如何工作的?