在 Vanilla JS 中触发 CustomEvent

Question

我正在尝试在 vanilla 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

您的代码运行良好，您只是决定在调用它之后 监听事件。此外，如果您想传递自定义数据，请通过detail 传递。您没有传递任何东西，但希望事件参数成为您的元素。

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>