如何使用javascript在material ui中取消注册/取消绑定事件

您好，我对

取消注册/解除绑定
材料组件有问题

注意：在我的实际项目中，每次动态加载数据时，我都会调用
initializeMaterialComponents

问题：我需要
取消注册/取消绑定
以前的事件，这样它就不会被触发3次（+）提供更好的解决方案

下面是我的问题
选择触发了3次：


函数初始化MaterialComponents（）{
//console.log（mdc）；
var-selectBox=new-mdc.select.MDCSelect（document.querySelector（'.mdc-select'）；
selectBox.listen（'MDCSelect:change'，（）=>{
警报（`selectedIndex${selectBox.selectedIndex}处的Selected选项，值为“${selectBox.value}`）；
});
}
初始化MaterialComponents（）；
初始化MaterialComponents（）；
初始化MaterialComponents（）

挑选一组食物




面包、谷类、米饭和面食


蔬菜


果


您应该将选择框初始化移到函数外部并创建侦听器，然后您可以使用


var-selectBox=new-mdc.select.MDCSelect（document.querySelector（'.mdc-select'）；
var onChangeListener=函数（事件）{
警报（`selectedIndex${selectBox.selectedIndex}处的Selected选项，值为“${selectBox.value}`）；
}
函数初始化MaterialComponents（）{
selectBox.unlisten（'MDCSelect:change'，onChangeListener'）；
selectBox.listen（'MDCSelect:change'，onChangeListener'）；
}
初始化MaterialComponents（）；
初始化MaterialComponents（）；
初始化MaterialComponents（）

挑选一组食物




面包、谷类、米饭和面食


蔬菜


果


因此jQuery版本之所以有效，是因为它在分配新的处理程序之前删除了事件处理程序。
在您的版本中，您可以通过
var selectBox=new mdc.select.MDCSelect（…）创建新的MDCSelect组件，因此JavaScript无法知道事件是否已附加

这里可以做的一个技巧是添加一个新属性，以便知道已经附加了事件处理程序


函数初始化MaterialComponents（）{
const元素=document.querySelector（'.mdc select:not（[event attached=true]）；
if（元素）{
元素setAttribute（'event-attached'，true）；
var selectBox=new mdc.select.MDCSelect（元素）；
selectBox.listen（'MDCSelect:change'，（）=>{
警报（`selectedIndex${selectBox.selectedIndex}处的Selected选项，值为“${selectBox.value}`）；
});
}
}
初始化MaterialComponents（）；
初始化MaterialComponents（）；
初始化MaterialComponents（）

挑选一组食物




面包、谷类、米饭和面食


蔬菜


果


这是因为您多次调用了
initializeMaterialComponents（）。动态添加数据时，不要每次都重新创建侦听器。
更改
侦听器只需添加一次。@RandyCasburn请编辑我的内容，其中显示了调用3次的jquery示例伟大的答案，对于多个选择，我们可以怎么做？请给我看几张select@EaBengaluru检查这个答案