如何链接<；部门>；到javascript对象（没有框架）？（将Actionscript概念发布到JS world）

我是Javascript的相对初学者。我来自FlashOOP编程（ActionScript3）的背景，在那里，屏幕上的图形对象与

类

之间存在固有的、明确的关系。我试图找出是否有可能将这种直接和明确的关系转化为Javascript/HTML世界

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

我的第一个想法是通过事件委托，向父图形对象添加一个事件侦听器，该对象覆盖我感兴趣的区域，并将其链接到代码

对象（或
类
）中“表示”该图形对象的“主方法”。从那里，我可以确定单击了对象的哪个部分，并引用了对象内部的方法。这似乎是一条很难走的路

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

我只是想问，是否还有其他方法可以链接整个图形DOM对象和整个代码
对象（或类、原型等），一种更接近Flash在一个图形对象和一个代码结构之间提供的直接连接的方法？
在有web UI的JavaScript世界中，是将JavaScript对象连接到组成页面的HTML元素的网关

虽然DOM的功能和功能有很多方面，但它从获取单个HTML元素（“节点”引用）或一组HTML元素（“节点列表”引用）的JavaScript引用开始我们不区分这些元素是否是“图形化”的。我们通常将这些元素视为“节点”。它们是HTML文档的一部分，因此它们是我们可以访问的元素“树”的一部分

可以通过多种方式获取引用（元素的
id
、元素使用的CSS类、元素在更大文档结构中的层次位置等）

以下是一些例子：


//通过其id获取DOM节点引用
var theDiv=document.getElementById（“firstDiv”）；
console.log（theDiv.textContent）；
//根据DOM节点在文档中的位置获取其引用
var theSecondDiv=document.querySelector（#firstDiv+div”）；//id为的后面的同级
console.log（第二个div.textContent）；
//获取具有“特殊”类的所有元素的节点列表
var theSpecials=document.queryselectoral（“.special”）；
console.log（专科[0].textContent，专科[1].textContent，专科.length）；
//基于具有特定属性值获取节点引用
var theButton=document.querySelector（“输入[type='button']”）；
theButton.value=“我有一个新值！”
我是一个div
我是第二组
我是一个有类的段落
我是一个班的h2
避免音译代码。事实上，我正在学习JavaScript。从概念上讲——我想我所说的一些东西——将屏幕区域与代码对象结合起来——是由框架解决的。我只是想看看是否有办法用“普通”Javascript解决这个问题。你的解释很有帮助——我熟悉你解释的一些基本概念，但你已经证实了我的想法：正如你所说，基本上应该将单个对象绑定到事件处理程序。我想我是想知道是否有一种方法可以（从概念上）说“所有发生在屏幕这一区域的事件都会变成这段代码”——如果你愿意的话，可以封装东西。我认为只有通过绑定到特定的处理程序，才有可能…@Cerulean不同类型的事件（即，
单击
与
鼠标悬停
）必须相互独立地配置。它们可以逐个元素进行配置，也可以通过事件委派在更高级别进行绑定。两个事件都可以调用同一个处理程序，但我们没有办法说“这里发生的任何事件都应该…”。