创建一个外部 div
<div id='container'>
your other divs
</div>
然后将查询选择器分配给 div 容器并指定要跟踪的事件，例如 click 、 change 等。
var g = {};
g.formClass = function()
{
/*call this method with <body onload = g.c.assignEventListeners();>*/
this.assignEventListners = function()
{
/*event listener for all links in the container div*/
container = document.querySelector("#container");
container.addEventListener("click", g.c.containerRouter, false);
container.addEventListener("change", g.c.containerRouter, false);
};
将事件发送到路由器，以检测 div 容器中的内容并执行您的特定代码
以下是一些示例，说明如何监控事件并决定要做什么。
this.containerRouter = function (e)
{
if (e.target !== e.currentTarget)
{
/*Reference the event's target id*/
if (e.target.id.indexOf('drop-button')>-1)
g.c.changeDisplay(e);
/*Reference the event's target class along with the type of event*/
if (e.target.classList[0]=='selMe' && e.type=='click')
document.getElementById(e.target.id).select();
if (e.target.classList[1]=='subMe' && e.type=='change')
g.c.subTotHrs(e);
}
e.stopPropagation();
};
this.changeDisplay = function(e)
{
/*
* Get a list of all <div> elements in the document with class="dropdown"
* store them in a array variable x
*/
var x = document.querySelectorAll("div.dropdown");
/*loop through the array and close all drop downs*/
for (var i = 0; i < x.length; i++ )
x[i].style.display="none";
/*
* use the .split( ) method to extract the button #
* this puts the parts into an array you can reference
*/
var divNum = e.target.id.split('drop-button');
document.getElementById('#dropdown'+divNum[1]).style.display="block";
};
}
g.c = new g.formClass;
您可以访问事件目标中的任何内容，例如 id、类、值等。您可以评估发生的事件类型。您可以选择更多。
您可以将查询选择器分配给整个文档或将范围缩小到 <tbody> 节点，例如，如果您正在使用按钮或文本字段动态填充表格，它们都可以通过这个事件侦听器进行检查
传递事件 ....(e) 并且您的函数/方法/子例程可以使用它来获取或放置有用的信息。
在此示例中，我将所有代码包装在一个全局对象中。您可以选择是否执行相同的操作，只需更改对您希望执行的函数/方法的引用。我包括了比你需要的更多的东西，只是为了展示一些可能性。
这是您的特定问题所需的代码
HTML
<div id ='container'>
<div class="col-lg-6 event-title">
<span>Special Olympics Unified Snowboarding Final</span>
<dd>SLOPESTYLE</dd>
<div id ="#dropdown1">
<h6>2016 RESULTS</h6>
<p>
GOLD - Chris Klug & Henry Meece<br>
SILVER - Danny Davis & Zach Elder<br>
BRONZE - Hannah teter & Daina Shilts
</p>
</div>
</div>
<div class="col-lg-1">
<button type="button" id = "#drop-button1" class="btn btn-default btn-lrg">▼</button>
</div>
</div>
javaScript
function assignEventListners(){
container = document.querySelector("#container");
container.addEventListener("click", containerRouter, false);
}
function containerRouter(e) {
if (e.target !== e.currentTarget)
if (e.target.id.indexOf('drop-button')>-1)
changeDisplay(e);
e.stopPropagation();
}
function changeDisplay(e)
{
var x = document.querySelectorAll("div.dropdown");
for (var i = 0; i < x.length; i++ )
x[i].style.display="none";
var divNum = e.target.id.split('drop-button');
document.getElementById('#dropdown'+divNum[1]).style.display="block";
};
请注意代码中的更改。为了解释“containerRouter”的用途，我将之前的代码从该方法中移出并创建了一个名为“changeDisplay”的新方法
这一切是如何运作的：
eventListner 被添加到外部 div“容器”中，因此只要用户在容器内执行某项操作，就会触发事件。
eventListner 将针对您指定的事件（如单击、更改、鼠标悬停等）的所有请求发送到一个方法“containerRouter”。这个 containerRouter 的简洁部分接收一个参数“e”。
“e”是事件。它附带了很多你可以使用的东西。
“containerRouter”应该只包含将触发事件定向到适当方法/函数的代码。否则，您可能会像您在原始帖子中所说的那样拥有一堆单独的事件侦听器。
在“containerRouter”中，您可以评估“e”。什么样的事件。具体是从哪里来的。是否存在与生成事件的对象相关联的内容。这里有几个例子。当您离开文本字段时，您可以使用“更改”事件。您可以检查和验证内容。或者，如果有人将鼠标悬停在页面的某个区域上，您可以读取该对象的 innerHTML 并显示它，然后进行任何更改。
特别是我们对您的示例所做的操作，我们在事件的目标 ID 中查找了一个子字符串“下拉列表”。目标是像按钮一样生成事件的对象。你给每个按钮一个唯一的 id。但也有一部分 id 完全相同，所以我们利用了这一点。使用 .indexOf('drop-button') > -1 的子字符串搜索方法，我们说如果该条件为真，则它必须是一个按钮。你可以google indexOf。所以去做点什么吧。在这种情况下，请更改屏幕的显示。
请注意，当我们调用方法/函数 changeDisplay 时，我们会发送“e”，因为它仍然有我们可以使用的东西。
在 changeDisplay 方法中，我们做的第一件事是使用方法 .querySelecorAll()。它为我们提供了我们页面上与搜索条件匹配的所有对象的数组，即<div>，它们有一个名为“dropdown”的类。这使我们无需遍历页面上的对象来收集信息。所以现在我们可以快速参考所有这些对象。即使它们已经关闭，一个简单的循环也会遍历并关闭它们。
接下来我们必须弄清楚你的哪个按钮被按下了。这就是“e”派上用场的地方。我们只是提取 e.target.id 的 id 值，然后对其进行剖析以找到数字。我们将号码附加到我们想要弹出的<div id="dropdown"> 上，瞧，就像我上面解释的那样完成了。