我該如何連結 <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> 

如您所見，事件委托有其地位，但是除非您有事件委托的用例之一，否則通常將單個對象綁定到事件處理程序。