javascript - 在 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>