Javascript 为什么'；t'；这'；关键字在下面的html代码中工作？

我想要一个带有“按钮文本”的警报

这不起作用：

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

按钮文本
函数fun（）{
警报（$（this.html（））；//我还尝试了$（this.val（）和$（this.text（））
}

但以下工作很好：

<script>
    function fun(){
        alert("some plain text");
    }
</script>

函数fun（）{
警报（“一些纯文本”）；
}

以下工作：

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

此代码导致以您尝试使用它的方式定义此。

以下操作有效：

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

---

此代码导致以您尝试使用的方式定义

此

。

您尝试记录的

此

是

窗口

对象，您不能在其上使用

innerHTML

。而是传递

按钮
元素的上下文


函数乐趣（上下文）{
警报（$（context.html（））；
}

按钮文本
您试图记录的
此
是
窗口
对象，您不能在其上使用
innerHTML
。而是传递
按钮
元素的上下文


函数乐趣（上下文）{
警报（$（context.html（））；
}

使用本机js事件处理程序的按钮文本不会为jquery提供此上下文。您单击的dom元素可以通过

function fun (e) {
  let el = e.target // currentTarget, etc.
}

使用本机js事件处理程序不会为jquery提供
this
上下文。您单击的dom元素可以通过

function fun (e) {
  let el = e.target // currentTarget, etc.
}

因为您将
fun（）
作为自由函数调用，而不是作为方法调用。作为函数调用时，
fun（）
接收设置为全局名称空间的
this

为了调用
fun
，将
设置为您想要的，您应该是特定的，例如：



按钮文本
函数fun（）{
警报（$（this.html（））；//我还尝试了$（this.val（）和$（this.text（））
}
因为调用
fun（）
是一个自由函数，而不是一个方法。作为函数调用时，
fun（）
接收设置为全局名称空间的
this

为了调用
fun
，将
设置为您想要的，您应该是特定的，例如：



按钮文本
函数fun（）{
警报（$（this.html（））；//我还尝试了$（this.val（）和$（this.text（））
}
我知道你已经接受了一个答案，但你收到的答案都没有回答你的问题。请考虑以下事项：

-
类型处理程序上的
的HTML属性从一开始就被设计为获取原始JavaScript代码并将代码包装到函数中。该函数提供了事件对象和设置为关键字
this
的上下文，作为接收事件的元素。因此，我下面的解决方案中的第一个按钮是完成您试图做的事情的正确方法

参考：

可以通过将DOM元素的
on-
事件属性设置为函数名来实现这一点。这可以在第二个按钮示例中看到。请注意，使用DOM属性时，会传递事件，上下文也会设置DOM元素

现在，类似于
onclick=“fun（this）”
及其变体在这些答案中起作用的原因是，它被包装在一个函数中，该函数使用
this
关键字set执行DOM元素的上下文（如上所述）。因此，它是一个调用函数并传递当前上下文的函数，也是一个反模式

这应该能回答你的问题


document.querySelector（“#otherButton”）.onclick=fun；
函数fun（）{
警报（$（this.html（））；
}

按钮文本
其他按钮
我知道你已经接受了一个答案，但你收到的答案都没有回答你的问题。请考虑以下事项：

-
类型处理程序上的
的HTML属性从一开始就被设计为获取原始JavaScript代码并将代码包装到函数中。该函数提供了事件对象和设置为关键字
this
的上下文，作为接收事件的元素。因此，我下面的解决方案中的第一个按钮是完成您试图做的事情的正确方法

参考：

可以通过将DOM元素的
on-
事件属性设置为函数名来实现这一点。这可以在第二个按钮示例中看到。请注意，使用DOM属性时，会传递事件，上下文也会设置DOM元素

现在，类似于
onclick=“fun（this）”
及其变体在这些答案中起作用的原因是，它被包装在一个函数中，该函数使用
this
关键字set执行DOM元素的上下文（如上所述）。因此，它是一个调用函数并传递当前上下文的函数，也是一个反模式

这应该能回答你的问题


document.querySelector（“#otherButton”）.onclick=fun；
函数fun（）{
警报（$（this.html（））；
}

按钮文本
另一个按钮< /代码>真的-但是甚至没有试图回答这个问题-为什么其他的工作也没有。“RANDYCASCONBY我仍然在添加更多细节。”但是，甚至没有试图回答这个问题-为什么其他的工作不存在。这正是我要找的：）谢谢，这正是我要找的：）请看我的答案-它完全回答了你的问题，说明了为什么其他答案“有效”。请看我的答案-它完全回答了你的问题，说明了为什么其他答案“有效”。谢谢，这真的很有帮助谢谢你，这真的很有帮助