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

Question

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

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

现在，我想通过分派这样的事件使用按钮来测试它。但是，我只能找到详细属性，而不是如何设置数据属性：

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

和

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

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

标签： javascriptdom-events

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>