javascript和dom操作

我的目标是在单击页面上的按钮时删除和/或移动其父元素。DOM似乎没有响应我的单击事件。我认为这与范围和全局变量有关，但我还是个新手。下面是我的代码

var startButton=document.querySelectorAll（'button[data action=“start”]”）；
var deleteButton=document.querySelectorAll（'button[data action=“delete”]”）；
var元素=document.getElementsByTagName（'section'）；
var firstChildElement=element.firstChild；
addEventListener（“单击”，开始）；
deleteButton.addEventListener（“单击”，删除器）；
/*函数声明*/
函数toStart（）{
元素。insertBefore（this.parentNode，firstChildElement）；
}
函数deleter（）{
element.removeChild（this.parentNode）；
}

第一项这是因为您正在使用，它返回一个（一组节点），并且您无法在一组节点上添加事件侦听器（调用
。addEventListener（）
）。只能在单个节点上执行此操作。同样的道理也适用于中国。它还返回一个节点列表，您不能请求节点列表的
.firstChild
。只能在节点上调用它

您可以改为使用，只获取与选择器匹配的第一个节点

现在，如果要在所有按钮上设置事件，则需要在节点列表上循环，并为每个按钮调用
.addEventListener（）

但是，由于您希望在所有按钮上使用相同的侦听器，因此它更高效，使用的代码更少，因此我们允许事件“冒泡”到祖先元素，并在更高级别的元素上拦截事件一次。然后，我们可以检查哪个元素在较低级别上实际触发了事件，并相应地采取行动


//我们将在节级别处理节中的所有单击事件
//而不是在多个元素上设置相同的处理程序。
设sec=文件查询选择器（“节”）；
第二节添加的列表（“点击”，手动点击）；
//当事件冒泡到节时，将调用此函数
//它将自动接收对触发它的事件的引用
函数handleClick（事件）{
//事件对象的.target属性引用较低级别的ojbect
//这实际上启动了事件（在我们的例子中是start或delete按钮）。
//我们需要被点击按钮的最近祖先
//方法查找与选择器匹配的最近祖先元素
让艺术=事件。目标。最近的（“文章”）；
//我们可以检查事件的来源，并据此采取行动
//因为您已经使用了data-*属性，所以请使用dataset API来测试它们
如果（event.target.dataset.action==“开始”）{
toStart（艺术）；
}else if（event.target.dataset.action==“删除”）{
德雷特（艺术）；
}
}
/*函数声明*/
功能启动（元素）{
element.parentNode.insertBefore（element，element.parentNode.firstChild）；
}
函数删除器（元素）{
element.parentNode.removeChild（元素）；
}

第一项我看不到您在视图中导入
.js
文件的位置。但不管怎样，如果您已经成功地将javascript文件导入到视图中，下面的答案解决了这个问题。使用
querySelector
的可能重复肯定会解决这个问题。仍然不起作用。此外，我希望所有按钮节点上都有此单击和响应事件，而不仅仅是first@mtkguy请参阅我更新的答案，其中说明了您共享的新信息。这不是您执行事件委派的方式。事件委派应仅在匹配完美选择器时触发操作。设置一个类似此处的void-else以触发删除程序意味着，如果您单击其中一篇文章中的任意位置，您将删除该文章。@Kaido虽然您认为我在
if
语句中留下了一个错误，但您认为它与事件委派有任何关系是不正确的。有一个可能发生默认操作的用例是完全合理的<代码>如果
语句已更新。谢谢你指出这一点。