javascript - 单击 <select> 但未选择任何选项后会触发什么事件？

Question

我试图在 <select> 之后触发清理功能已打开，但未选择任何选项，用户点击离开。
我试过change和 blur ，但没有一个开火。
sample 和视觉效果

const select = document.querySelector('select');

select.addEventListener('blur', () => {
    console.log('blur');
});

<select>
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>

我点击<select>然后在不选择选项的情况下单击它之外。 blur在我执行 之前不会触发事件第二在第一次外部单击后单击。

Answer 1

至于打开选择菜单时发生的事件有很多。很可能有一种方法可以创建您自己的 CustomEvent 并通过跟踪其他事件来触发它。如果您可以看到正在发生的事件，您可能会弄清楚一些事情。这是我用来查找 EventTarget 上发生的所有事件的脚本:

EventTarget.prototype.__original_addEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(listener, callback) {
    if (listener === 'event') {
        for (let key in this) {
            if (key.startsWith('on')) {
                let eventName = key.substr(2, key.length);
                this.__original_addEventListener(eventName,
                function(e) {
                    callback(e);
                });
            }
        }
    } else {
        this.__original_addEventListener(listener, callback);
    }
};

window.onload = function() {
    document.querySelector('#id-of-my-select-tag').addEventListener('event', (e) => {
        console.log(e.type);
    });
};

这仅允许您添加一个名为“事件”的监听器，该监听器捕获所有事件。这将输出所有发生的事件，也许你会看到一个模式，它可以帮助你编写一些代码来根据发生的事件和它们发生的顺序来检测它何时打开。 (在 Firefox、Chrome 和 Edge 中测试)