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

问题描述

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

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

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

我知道当用户选择一个新值时尝试拦截一个事件。 I read in documentation：

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

...

toggle 在结果元素显示或隐藏时触发。

这个点令人惊讶。 I checked in the code source of the library。是的，有一个点。

 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？

解决方法

我发现了一个 solution on Hotwire。我必须在文档上添加一个监听器。

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

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