在 Vanilla JS 中触发 CustomEvent

Question

我正在尝试在普通 JavaScript 中创建自定义事件，但并不真正了解如何触发它。据我所知有jQuery方法trigger('customEvent')，但是它是如何实现的呢Vanilla JS？找不到任何相关信息。

创建CustomEvent：

var addColor = function (elem) {

    elem.classList.add('red');
    var event = new CustomEvent('madeRed');
    elem.dispatchEvent(event);
};

附加addEventListener到元素

var elem = document.querySelector('div');
addColor(elem);

elem.addEventListener('madeRed', function (elem) {
    elem.classList.add('color-do-changed');
}, false);

Answer 1

您的代码工作正常，您只是决定在调用该事件后监听该事件。另外，如果您想传递自定义数据，请通过详细信息传递。您没有传递任何内容，但期望事件参数成为您的元素。

var elem = document.querySelector('div');

var addColor = function (elem) {
    elem.classList.add('red');
    var event = new CustomEvent('madeRed', {
      detail: {
        elem
      }
    });
    elem.dispatchEvent(event);
};

elem.addEventListener('madeRed', function (event) {
    event.detail.elem.classList.add('color-do-changed');
}, false);


addColor(elem);

.red { color: red }
.color-do-changed { text-decoration: underline }

<div>Make me red</div>