监听事件中的特定数据属性

Question

我需要监听一个 message 事件，该事件将具有 data 属性，并根据此属性执行不同的操作。

window.addEventListener("message", m => {
    if m.data === "success" {
        console.log("Success!")
    } else {
        console.log("Failure!")
    }
});

现在，我想通过调度此类事件来使用按钮对此进行测试。但是，我只能找到detail属性，却找不到data属性的设置方法：

<button id="messageButton">Send Message</button>

和

messageButton.onclick = function () {
        messageButton.dispatchEvent(new CustomEvent("message", { bubbles: true, detail: "success" }))
}

如何使用 data 属性而不是 detail 属性发送？

Answer 1

如果您正在测试消息事件，您可能需要 MessageEvent 而不是 CustomEvent。 MessageEvent 的构造函数接受带有 data 属性:

的“init”对象

function sendMessage(data) {
    const event = new MessageEvent("message", { data });
    window.dispatchEvent(event);
}

示例：

window.addEventListener("message", m => {
    if (m.data === "success") {
        console.log("Success!");
    } else {
        console.log("Failure!");
    }
});

function sendMessage(data) {
    const event = new MessageEvent("message", { data });
    window.dispatchEvent(event);
}

document.getElementById("btnSuccess").addEventListener("click", function() {
    sendMessage("success");
});
document.getElementById("btnFailure").addEventListener("click", function() {
    sendMessage("failure");
});

<button id="btnSuccess" type="button">Send 'success' Message</button> 
<button id="btnFailure" type="button">Send 'failure' Message</button>

但是如果你想使用 CustomEvent，你需要创建事件对象，然后将属性添加到它：

function sendMessage(data) {
    const event = new CustomEvent("message", { bubbles: true });
    event.data = data;
    window.dispatchEvent(event);
}

示例：

window.addEventListener("message", m => {
    if (m.data === "success") {
        console.log("Success!");
    } else {
        console.log("Failure!");
    }
});

function sendMessage(data) {
    const event = new CustomEvent("message", { bubbles: true });
    event.data = data;
    window.dispatchEvent(event);
}

document.getElementById("btnSuccess").addEventListener("click", function() {
    sendMessage("success");
});
document.getElementById("btnFailure").addEventListener("click", function() {
    sendMessage("failure");
});

<button id="btnSuccess" type="button">Send 'success' Message</button> 
<button id="btnFailure" type="button">Send 'failure' Message</button>

监听事件中的特定数据属性

Listen to a specific data attribute in events

javascript

dom-events