一个或多个 DOMContentLoaded 事件侦听器？

Question

我应该只创建一个 DOMContentLoaded 事件侦听器并收集内部所有元素的所有内容，还是可以为每个元素编写多个 DOMContentLoaded 侦听器？

这：

    window.document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.sidenav');
        var instances = M.Sidenav.init(elems, {edge:'right'});
    });

    window.document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.collapsible');
        var instances = M.Collapsible.init(elems, {"accordion" : false});
    });

或这个：

    window.document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.sidenav');
        var instances = M.Sidenav.init(elems, {edge:'right'});
        var elems2 = document.querySelectorAll('.collapsible');
        var instances2 = M.Collapsible.init(elems2, {"accordion" : false});
    });

什么是更正确的呢？对 DOMContentLoaded 事件使用多个函数是否有任何警告？一个人会覆盖另一个人，还是他们都被保存并稍后被解雇？

现在我把它们分别放在不同的功能中，这对我来说更方便，但我不知道它是否正确。谢谢。

Answer 1

通过将其放入一个侦听器函数中，您可以减少代码碎片，提高可读性，并避免下一个开发人员“修复”第一个侦听器中实际上已经存在于第二个侦听器中的缺失调用的情况。

如果单个显示页面有多个源文件（例如将 MVC 共享视图加载到父视图中），您可能会发现在多个文件中拥有侦听器是合乎逻辑且必要的。