javascript - 当事件名称包含点时如何拦截自定义事件？

Question

我正在尝试从刺激自动完成库中拦截一个事件。

当我尝试拦截切换事件时，它工作正常。

export default class extends Controller {
    //...
    toggle(event) {
        console.log(event);
    }
}

我知道当用户选择一个新值时尝试拦截一个事件。 我在文档中读到：

当用户从自动完成字段中选择一个新值时， autocomplete.change会触发。事件详细信息包含所选结果的 value 和 textValue 属性。

...

当显示或隐藏结果元素时触发切换。

这个点令人惊讶。我检查了库的代码源。是的，有一个点。

 new CustomEvent("autocomplete.change", { 

好的，所以我尝试使用点，但是，在编译过程中，点上有语法错误。

export default class extends Controller {
    autocomplete.change(event) {                 
        console.log(event);
    }
}

当我尝试时没有任何反应：

export default class extends Controller {
    change(event) {
        console.log(event);
    }
}

当我尝试使用引号时没有任何反应。我的意思是，无论我做什么，日志总是空的。

export default class extends Controller {
    'autocomplete.change'(event) {
        console.log(event); 
    }
}

如何拦截自定义事件autocomplete.change？

Answer 1

我在 Hotwire 上找到了解决方案。我必须在文档上添加一个监听器。

export default class extends Controller {
    
    connect() {
        document.addEventListener("autocomplete.change", this.autocomplete.bind(this))
    }

    autocomplete(event) {
       console.log(event)
    }