我该如何连结 <div> javascript对象（没有框架）？ （Actionscript概念到JS world）

Question

我是Java语言的相对入门者。 我来自Flash OOP编程的背景知识（动作脚本3），其中在屏幕上的图形对象和Class之间存在固有的显式关系。 我试图找出是否有可能将这种直接和显式的关系转换为Javascript / HTML世界。

例如，如果我有一个在线游戏，并且具有各种图形区域-游戏区域，输入区域，记分板。 我希望与每个交互都应由单独的对象或原型（或类或模块）处理。

我的第一个想法是通过事件委托来做到这一点，将事件侦听器添加到覆盖我感兴趣的区域的父图形对象，并将其链接到“表示”代码的Object （或Class ）中的“主方法”。该图形对象。 从那里，我可以弄清楚单击对象的哪个部分以及对象内部的引用方法。 这似乎是一条尴尬的路线。

或者，我可以简单地将事件侦听器添加到图形对象中的各个组件，并将它们链接到表示该图形对象的代码对象内的事件处理程序。 我认为这可能是正确的答案。

我只是想问问是否还有其他方法可以链接整个图形DOM对象和整个代码Objects （或类，原型等），而这种方法更紧密地模仿了Flash在一个图形对象和一个代码结构之间提供的直接连接吗？

Answer 1

在具有Web UI的JavaScript世界中， 文档对象模型（DOM）API是将JavaScript对象连接到组成页面的HTML元素的网关。

尽管DOM有很多方面和可以做什么，但它首先要获取对单个HTML元素（“节点”引用）或一组HTML元素（“节点列表”引用）的JavaScript引用。 我们不区分这些元素是否是“图形”元素。 我们将这些元素统称为“节点”。 它们是HTML文档的一部分，因此它们是我们可以访问的元素“树”的一部分。

获取引用可以通过多种方式完成（元素的id ，元素使用的CSS类，元素在较大文档结构中的分层位置等）。

这里有些例子：

 // 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参考后，下一步就是与对象进行交互，这可能意味着获取/设置属性值，调用方法或配置事件回调函数。

在大多数情况下，HTML属性将映射到JavaScript对象属性。 在最后一个例子的value的属性 <input type="button">映射到value JavaScript的DOM对象引用（ 财产 theButton.value = ... ）。 除了将原始HTML元素的属性转换为属性外，DOM API还为DOM对象引用赋予了其他属性。 例如，所有节点都具有nodeName ， nodeType和nodeValue属性，表示具有开始和结束标记的元素的节点将具有.textContent和.innerHTML属性，以将内容获取/设置为文本或HTML。 其他更独特的DOM引用类型将具有更多特定的属性。

DOM API还为DOM对象指定了各种方法。 例如，表单元素将具有.focus()方法，用于设置UI在该元素上的焦点，就好像用户已将其切换到该元素或单击该元素一样。

现在，您的问题...

几乎所有DOM元素都支持各种事件，您可以配置单个元素以响应一个或多个事件，也可以利用“事件冒泡”并在祖先元素上设置事件处理程序，并等待后代中触发的事件冒泡取决于祖先。 这是您在问题中提到的“事件委托” 。

以下是两个示例：

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

如您所见，事件委托有其地位，但是除非您有事件委托的用例之一，否则通常将单个对象绑定到事件处理程序。