javascript - javascript 中的 "onclick"和 "this"

Question

我很迷惑:

为什么使用内联onlick，我们必须写onclick="hello()"，但是在JS中，我们应该写btn.onclick=hello或者btn.addEventListener('click',hello);

对于常规函数，为什么使用内联onlick，“this”是指窗口，但使用js调用时，“this”是指按钮。

我不明白最后两个按钮

根据 w3school，在一个函数中，this 指的是全局对象。
https://www.w3schools.com/js/js_this.asp

在常规函数中，this 关键字表示调用函数的对象，可以是窗口、文档、按钮或其他任何东西。
https://www.w3schools.com/js/js_arrow_function.asp

const arrayBtn = document.querySelector(".arrowFunc");
const regBtn = document.querySelector(".regFunc");
hello = () => console.log("i am arrow function" + this);
function hiii(){
  console.log("i am regular function" + this);
}
arrayBtn.addEventListener("click", hello);
regBtn.addEventListener("click", hiii);

<button onclick="hello()">This calls an arrow function with an inline onclick</button>
<button class="arrowFunc">This calls an arrow function with event listener</button>
<button onclick="hiii()">This calls an regular function with an inline onclick</button>
<button class="regFunc">This calls an regular function with event listener</button>
<button onclick="function tes(){console.log(this)}tes()">button</button>
<button onclick="console.log(this)">button</button>

[Log] i am arrow function[object Window] <br>
[Log] i am arrow function[object Window] <br>
[Log] i am regular function[object Window] <br>
[Log] i am regular function[object HTMLButtonElement] <br>
[Log] Window {document: #document, window: Window, NaN: NaN, nalert: function, obj: {name: "my_obj"}, …} <br>
[Log] <button onclick="console.log(this)">button</button>

Answer 1

正文 hello()在线<button onclick="hello()">实际上它本身就是一个小的 javascript 程序——你永远不应该使用它，它是一种过时的老式方法，可以让任何东西工作，应该被遗忘

相反，javascript中的正确方法是这样的:

function hello() {}
button.onclick = hello

在哪里 hello是函数的名称(不是 javascript 程序)

至于为什么 this是当前按钮？所有函数都可以用不同的 this 调用

您可以调用 hello具有不同 this 的函数如果你想

hello.call({turkey: true})

你就是这样称呼 hello并提供 {turkey: true}作为 this目的

html元素调用事件处理程序是标准的，元素为 this。目的

干杯👋追逐