是否可以在我自己的类中使用 onEventName 模式/语法来自定义事件？

Question

我编写了自己的 JavaScript 类（用于自定义 Web 组件）。它引发了一些事件。例如：

TagChanged

为了收听此事件，我（显然）这样做：

myObject.addEventListener('TagChanged'), (e) => doSomething());

但是有可能有这样的东西吗：

myObject.onTagChanged = (e) => doSomething();

默认的 DOM 元素有

onClick

和

onKeyDown

之类的东西。他们使用其他架构吗？

Answer 1

你可以自己实现一些东西，像这样：

class MyComponent extends HTMLElement {
    __ontagchanged = null;

    get ontagchanged() {
        return this.__ontagchanged;
    }
    set ontagchanged(fn) {
        // remove old listener, if applicable
        if (this.__ontagchanged) {
            this.removeEventListener('tagchanged', this.__ontagchanged);
        }

        // add new listener, if applicable
        if (typeof fn === 'function') {
            // create a unique function to prevent conflicts when using
            // the same function with the add/removeEventListener interface
            this.__ontagchanged = e => fn(e);
            this.addEventListener('tagchanged', this.__ontagchanged);
        } else {
            this.__ontagchanged = null;
        }
    }
}