javascript - 了解 onclick 属性

Question

有人可以解释一下元素的“onlick”属性如何工作的概念吗，涉及到它被分配给函数时的语法，以及它继承自的实现。

const FOO = document.querySelector('.bar');
FOO.onclick = function (e) {
    e.preventDefault();
    console.log('button clicked');
}

一个令人困惑的领域是浏览器如何知道(在实现中)将 onclick 属性视为点击事件。

将元素的 onclick 属性分配给函数如何使元素能够监听单击事件 - 与将函数分配给该元素的任何其他组成属性相反(幕后发生了什么？ )。

是否每个元素都设计为始终监听单击事件，并通过将 onclick 属性专门分配给函数来通过单击事件执行该函数？

我是编程、JavaScript 和面向对象概念的初学者。我希望有人能够提供他们的见解并以任何方式解释这些概念。

非常感谢您的时间和帮助

Answer 1

是的，每个元素都被设计为始终监听点击事件。通过编写 Element.onclick = function(){}，您可以将一个函数分配给对象(元素)的 onclick 属性，该函数将在单击该元素时执行。本质上，元素是一个对象，它的属性可以像任何其他对象一样设置。

对象由属性和值对组成。考虑以下对象。

var obj = {color: "red"};

该对象只有一个属性:颜色，其值为“红色”。如果您要为该对象分配另一个属性，您可以这样做:

obj.background = "green";//or obj["background"] = "green";

您可以将函数指定为对象属性之一的值。元素的 onclick 属性始终在单击时运行。当您更新它的值时，它会替换旧值，并且您提供的新函数将在单击该元素时运行。