了解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属性始终在单击时运行。当您更新它的值时，它将替换旧值，并且在单击Element时将运行您提供的新功能。