[英]Why doesn't 'this' keyword work in following html code?
I want an alert with "button text" 我想要一个带有“按钮文字”的警报
this doesn't work: 这不起作用:
<button onclick="fun()">button text</button>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
function fun(){
alert($(this).html()); //I've also tried $(this).val() and $(this).text()
}
</script>
but following works fine: 但是以下工作正常:
<script>
function fun(){
alert("some plain text");
}
</script>
The this
you're trying to log is the Window
object, on which you can't use innerHTML
. 您要记录的
this
是Window
对象,不能在其上使用innerHTML
。 Instead, pass the context of the button
element. 而是传递
button
元素的上下文。
function fun(context) { alert($(context).html()); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="fun(this)">button text</button>
I realize you've already accepted an answer, but none of the answers you received addressed your question. 我知道您已经接受了答案,但是您收到的所有答案均未解决您的问题。 Please consider the following:
请考虑以下几点:
The HTML attribute for the on-
type handlers were designed from the beginning to take raw JavaScript code and wrap that code into a function. 从一开始就设计了
on-
type处理程序的HTML属性,以使用原始JavaScript代码并将该代码包装为一个函数。 That function is provided with the event object and the context set to the keyword this
as the element receiving the event. 该函数具有事件对象,并且将上下文设置为关键字
this
作为接收事件的元素。 So the first button in my solution below is the proper way to accomplish what you were attempting to do. 因此,下面我的解决方案中的第一个按钮是完成您要尝试执行的操作的正确方法。
Ref: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers#Event_handler's_parameters_this_binding_and_the_return_value 参考: https : //developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Event_handlers#Event_handler's_parameters_this_binding_and_the_return_value
The same can be accomplished by setting the DOM Element's on-
event property to the function name. 通过将DOM元素的
on-
event 属性设置为函数名称,可以实现相同的目的。 This is seen in the second button example. 在第二个按钮示例中可以看到这一点。 Note that when the DOM property is used, the event is passed and the context set the DOM element too.
请注意,使用DOM属性时,将传递事件,并且上下文也将设置DOM元素。
Now, the reason something like onclick="fun(this)"
and its variants work in these answers, is because that is being wrapped inside a function which is executed with the this
keyword set the context of the DOM element (just as described above). 现在,诸如
onclick="fun(this)"
及其变体之类在这些答案中起作用的原因是,因为它被包装在用this
关键字执行并设置DOM元素上下文的函数中(如上所述) )。 So it is a function calling a function and passing the current context - and an anti-pattern. 因此,它是一个调用函数并传递当前上下文的函数,以及一个反模式。
That should really answer your question. 那真的应该回答你的问题。
document.querySelector('#otherButton').onclick = fun; function fun() { alert($(this).html()); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="alert($(this).html());">button text</button> <button id="otherButton">other button</button>
The following works: 以下作品:
<button onclick="fun(this)">button text</button>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
function fun(myButton){
alert($(myButton).html()); //I've also tried $(this).val() and $(this).text()
}
</script>
Within fun
, this
will not be your button, because fun
is not called on the button. 在
fun
, this
将不是您的按钮,因为没有在该按钮上调用fun
。
The following also works: 以下内容也适用:
<button onclick="fun.apply(this)">button text</button>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
function fun(){
alert($(this).html()); //I've also tried $(this).val() and $(this).text()
}
</script>
This code causes this
to be defined in the manner you tried to use it. 此代码将导致
this
在你试图使用它的方式来定义。
Because you call fun()
as a free function but not as a method. 因为您将
fun()
作为自由函数而不是方法来调用。 Being called as a function the fun()
receives this
set to global namespace. 作为函数被调用,
fun()
this
设置接收到全局名称空间。
In order to call fun
with this
set to what you want you shall be specific, for example like this: 为了调用
fun
与this
设置为你希望你应当具体,例如像这样的内容:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="fun.call(this)">button text</button> <script> function fun(){ alert($(this).html()); //I've also tried $(this).val() and $(this).text() } </script>
Using a native js event handler does not give the this
context for jquery. 使用本机js事件处理程序不会为jquery提供
this
上下文。 The dom element that you clicked on is available through 您单击的dom元素可通过以下方式获得
function fun (e) {
let el = e.target // currentTarget, etc.
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.