我如何 link <div> 到 javascript 对象（没有框架）？ （JS 世界的 Actionscript 概念）
How do I link <div> to javascript object (without framework)? (Actionscript concepts to JS world)
我是 Javascript 的初学者。我有 Flash OOP 编程 (Actionscript 3) 的背景，屏幕上的图形对象和 Class 之间存在内在和明确的关系。我试图弄清楚是否有可能将这种直接和明确的关系转化为 Javascript/HTML 世界。
例如，如果我有一个在线游戏并且有各种图形区域——一个游戏区域、一个输入区域、一个记分板。我希望与每一个的交互应该由一个单独的对象或原型（或 class 或模块）处理。
我的第一个想法是通过事件委托，向覆盖我感兴趣区域的父图形对象添加一个事件监听器link在 Object（或 Class）代码中将其添加到 "master method" 中 "represents" 该图形对象。从那里我可以找出对象的哪一部分被点击并引用对象内部的方法。这似乎是一条尴尬的下行路线。
或者我可以简单地将事件侦听器添加到图形对象中的各个组件，并将它们link添加到表示该图形对象的代码对象内的事件处理程序。我认为这可能是正确的答案。
我只是想问一下是否有其他方法可以 link 整个图形 DOM 对象和整个代码 Objects（或 classes、原型等） ，一种更接近于模仿 Flash 在一个图形对象和一种代码结构之间提供的直接联系的方式？
在有网络 UI 的 JavaScript 世界中，Document Object Model (DOM) API 是您连接 JavaScript 对象指向构成页面的 HTML 个元素。
虽然 DOM 的功能和功能有很多方面，但首先要获得对单个 HTML 元素的 JavaScript 引用（"node"参考）或一组 HTML 元素（"node list" 参考）。 我们不区分这些元素是否 "graphical"。我们通常将这些元素中的每一个视为 "nodes". 它们是 HTML 文档的一部分，因此它们是我们可以访问的 "tree" 元素的一部分.
可以通过多种方式获取引用（元素的 id、元素使用的 CSS class(es)、元素在较大文档结构中的层次位置等）。
这里有一些例子：
// Get a DOM node reference via its id
var theDiv = document.getElementById("firstDiv");
console.log(theDiv.textContent);
// Get a DOM node reference based on its position in the document
var theSecondDiv = document.querySelector("#firstDiv + div"); // Sibling following the one with the id
console.log(theSecondDiv.textContent);
// Get a node list of all the elements that have the "special" class
var theSpecials = document.querySelectorAll(".special");
console.log(theSpecials[0].textContent, theSpecials[1].textContent, theSpecials.length);
// Get a node reference based on having a certain attribute value
var theButton = document.querySelector("input[type='button']");
theButton.value = "I have a new value!";
<div id="firstDiv">I'm a div</div>
<div>I'm the second div</div>
<p class="special">I'm a paragraph with a class</p>
<h2 class="special">I'm an h2 with a class</h2>
<input type="button" value="Button">
<input type="text">
获得 DOM 引用后，下一步就是与对象交互，这可能意味着 getting/setting 属性 值、调用方法或配置事件回调函数。
在大多数情况下，HTML 属性将映射到 JavaScript 对象属性。在最后一个示例中，<input type="button"> 的 value 属性 映射到 value 属性 JavaScript DOM 对象引用 (theButton.value = ...)。除了将原始 HTML 元素的属性转换为属性外，DOM API 还赋予 DOM 对象引用额外的属性。例如，所有节点都有 nodeName、nodeType 和 nodeValue 属性，表示具有开始和结束标记的元素的节点将有 .textContent 和 .innerHTML 属性 到 get/set 文本内容或 HTML。其他更独特的 DOM 引用类型将具有更具体的属性。
DOM API 还指定了 DOM 对象的各种方法。例如，表单元素将有一个 .focus() 方法来设置 UI 在该元素上的焦点，就好像用户已经跳转到该元素或单击它一样。
现在，对于你的问题...
几乎所有 DOM 元素都支持各种事件，您可以配置单个元素来响应一个或多个事件，或者您可以利用 "event bubbling" and set an event handler on an ancestor element and wait for events triggered in descendants to bubble up to the ancestor. This is the "event delegation" 你在问题中提到的。
以下是两者的示例：
// Set an event handler for the <p> element
document.querySelector("p").addEventListener("click", function(){ console.log("You clicked the p"); });
// Event delegation is beneficial in two circumstances.
// 1. When a single function should be used to handle the same event for many different elements
// and you don't want to have to store that callback function with all the different elements
// FYI: all event handlers are automatically passed a reference to the event object that they are handling
document.getElementById("parent").addEventListener("click", function(evt){
console.log("The event was handled at the parent, but it was triggered at: " + evt.target);
});
// 2. When elements will be dynamically added to the document and you can't statically set up event
// handlers for elements that don't exist yet.
let span = document.createElement("span");
span.textContent = "I was dynamically created, but if you click me, I'll immediately work!";
document.getElementById("parent").appendChild(span);
<div id="parent">
<p>Child One (p)<p>
<div>Child Two (div)</div>
</div>
如您所见，事件委托有它的一席之地，但除非您有事件委托的用例之一，否则将单个对象绑定到事件处理程序通常是常态。
我是 Javascript 的初学者。我有 Flash OOP 编程 (Actionscript 3) 的背景，屏幕上的图形对象和 Class 之间存在内在和明确的关系。我试图弄清楚是否有可能将这种直接和明确的关系转化为 Javascript/HTML 世界。
例如，如果我有一个在线游戏并且有各种图形区域——一个游戏区域、一个输入区域、一个记分板。我希望与每一个的交互应该由一个单独的对象或原型（或 class 或模块）处理。
我的第一个想法是通过事件委托，向覆盖我感兴趣区域的父图形对象添加一个事件监听器link在 Object（或 Class）代码中将其添加到 "master method" 中 "represents" 该图形对象。从那里我可以找出对象的哪一部分被点击并引用对象内部的方法。这似乎是一条尴尬的下行路线。
或者我可以简单地将事件侦听器添加到图形对象中的各个组件，并将它们link添加到表示该图形对象的代码对象内的事件处理程序。我认为这可能是正确的答案。
我只是想问一下是否有其他方法可以 link 整个图形 DOM 对象和整个代码 Objects（或 classes、原型等） ，一种更接近于模仿 Flash 在一个图形对象和一种代码结构之间提供的直接联系的方式？
在有网络 UI 的 JavaScript 世界中，Document Object Model (DOM) API 是您连接 JavaScript 对象指向构成页面的 HTML 个元素。
虽然 DOM 的功能和功能有很多方面，但首先要获得对单个 HTML 元素的 JavaScript 引用（"node"参考）或一组 HTML 元素（"node list" 参考）。 我们不区分这些元素是否 "graphical"。我们通常将这些元素中的每一个视为 "nodes". 它们是 HTML 文档的一部分，因此它们是我们可以访问的 "tree" 元素的一部分.
可以通过多种方式获取引用（元素的 id、元素使用的 CSS class(es)、元素在较大文档结构中的层次位置等）。
这里有一些例子：
// Get a DOM node reference via its id
var theDiv = document.getElementById("firstDiv");
console.log(theDiv.textContent);
// Get a DOM node reference based on its position in the document
var theSecondDiv = document.querySelector("#firstDiv + div"); // Sibling following the one with the id
console.log(theSecondDiv.textContent);
// Get a node list of all the elements that have the "special" class
var theSpecials = document.querySelectorAll(".special");
console.log(theSpecials[0].textContent, theSpecials[1].textContent, theSpecials.length);
// Get a node reference based on having a certain attribute value
var theButton = document.querySelector("input[type='button']");
theButton.value = "I have a new value!";
<div id="firstDiv">I'm a div</div>
<div>I'm the second div</div>
<p class="special">I'm a paragraph with a class</p>
<h2 class="special">I'm an h2 with a class</h2>
<input type="button" value="Button">
<input type="text">
获得 DOM 引用后，下一步就是与对象交互，这可能意味着 getting/setting 属性 值、调用方法或配置事件回调函数。
在大多数情况下，HTML 属性将映射到 JavaScript 对象属性。在最后一个示例中，<input type="button"> 的 value 属性 映射到 value 属性 JavaScript DOM 对象引用 (theButton.value = ...)。除了将原始 HTML 元素的属性转换为属性外，DOM API 还赋予 DOM 对象引用额外的属性。例如，所有节点都有 nodeName、nodeType 和 nodeValue 属性，表示具有开始和结束标记的元素的节点将有 .textContent 和 .innerHTML 属性 到 get/set 文本内容或 HTML。其他更独特的 DOM 引用类型将具有更具体的属性。
DOM API 还指定了 DOM 对象的各种方法。例如，表单元素将有一个 .focus() 方法来设置 UI 在该元素上的焦点，就好像用户已经跳转到该元素或单击它一样。
现在，对于你的问题...
几乎所有 DOM 元素都支持各种事件，您可以配置单个元素来响应一个或多个事件，或者您可以利用 "event bubbling" and set an event handler on an ancestor element and wait for events triggered in descendants to bubble up to the ancestor. This is the "event delegation" 你在问题中提到的。
以下是两者的示例：
// Set an event handler for the <p> element
document.querySelector("p").addEventListener("click", function(){ console.log("You clicked the p"); });
// Event delegation is beneficial in two circumstances.
// 1. When a single function should be used to handle the same event for many different elements
// and you don't want to have to store that callback function with all the different elements
// FYI: all event handlers are automatically passed a reference to the event object that they are handling
document.getElementById("parent").addEventListener("click", function(evt){
console.log("The event was handled at the parent, but it was triggered at: " + evt.target);
});
// 2. When elements will be dynamically added to the document and you can't statically set up event
// handlers for elements that don't exist yet.
let span = document.createElement("span");
span.textContent = "I was dynamically created, but if you click me, I'll immediately work!";
document.getElementById("parent").appendChild(span);
<div id="parent">
<p>Child One (p)<p>
<div>Child Two (div)</div>
</div>
如您所见，事件委托有它的一席之地，但除非您有事件委托的用例之一，否则将单个对象绑定到事件处理程序通常是常态。