在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。你没有传递任何东西，但期望事件参数成为你的元素。

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

<div>Make me red</div>

＆＃13;

＆＃13;

＆＃13;