一个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共享视图加载到父视图中)，你可能会发现在多个文件中有一个监听器是合乎逻辑的，也是必要的。