javascript & global event & custom event
new CustomEvent object
let event = new CustomEvent(
"newMessage",
{
detail: {
message: "Hello World!",
time: new Date(),
},
bubbles: true,
cancelable: true
}
);
// global html
document.querySelector(`:root`).dispatchEvent(event);
// document.querySelector(`html`).dispatchEvent(event);
// document.querySelector(`body`).dispatchEvent(event);
document.addEventListener("newMessage", newMessageHandler, false);
https://www.sitepoint.com/javascript-custom-events/
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
*
* @description customizeEvent
* @augments
* @example
* @link
*
*/
// elements
let body = document.body;
let msgbox = document.getElementById("msgbox");
let log = document.getElementById("log");
// form submit handler
msgbox.addEventListener("submit", SendMessage, false);
// newMessage event subscribers
document.addEventListener("newMessage", newMessageHandler, false);
body.addEventListener("newMessage", newMessageHandler, false);
msgbox.addEventListener("newMessage", newMessageHandler, false);
// newMessage event handler
function newMessageHandler(e) {
LogEvent(
"Event subscriber on "
+
e.currentTarget.nodeName
+
", "
+
e.detail.time.toLocaleString()
+
": "
+
e.detail.message
);
}
// log event in console
function LogEvent(msg) {
log.textContent += msg + "\n";
let ot = log.scrollHeight - log.clientHeight;
if (ot > 0) log.scrollTop = ot;
}
// new message: raise newMessage event
function SendMessage(e) {
e.preventDefault();
let msg = document.getElementById("msg").value.trim();
if (msg && window.CustomEvent) {
let event = new CustomEvent("newMessage", {
detail: {
message: msg,
time: new Date(),
},
bubbles: true,
cancelable: true
});
e.currentTarget.dispatchEvent(event);
}
}
// const customizeEvent = (datas = [], debug = false) => {
// let result = ``;
// // do something...
// return result;
// };
// export default customizeEvent;
// export {
// customizeEvent,
// };
old way
A get data, then set global flag = true
B setInterval, listen the global = true, then show data and set the global flag = true
OK
A page
window.IS_NEW_MSG = false;
const autoRefreshEvent = (msg = ``) => {
let event = new CustomEvent("newMessage", {
detail: {
message: msg,
time: new Date().getTime(),
},
bubbles: true,
cancelable: true,
});
document.querySelector(`html`).dispatchEvent(event);
log(`%c dispatchEvent`, `color: red;`, event);
// document.querySelector(`:root`).dispatchEvent(event);
// e.currentTarget.dispatchEvent(event);
window.IS_NEW_MSG = true;
};
const handleSelfNewMessage = (obj = {}, debug = false) => {
log(`Self Messages =`, JSON.stringify(obj, null, 4));
let chat_list_uids = JSON.parse(window.localStorage.getItem(`chat_list_uids`));
// log(`chat_list_uids =`, chat_list_uids);
if (chat_list_uids.length) {
window.DB = window.DB || {};
window.DB_SELF = window.DB_SELF || {};
chat_list_uids.forEach(
(item, i) => {
window.DB[item] = window.DB[item] || [];
// DB Store
window.DB_SELF[item] = window.DB_SELF[item] || [];
}
);
}
if (Object.keys(obj).length) {
let {
SendUserID: senderUid,
ReciveUserID: receiverUid,
SerialNumber: serialNum,
MsgID: msgId,
Info: text,
// MsgType: msgType,
SendTime: time,
UnReadMsgCount: count,
OriginTime: timestamp,
} = obj;
let temp = {
senderUid,
receiverUid,
serialNum,
msgId,
// msgType,
text,
time,
count,
isSelf: true,
timestamp,
};
// if (window.DB_SELF[receiverUid]) {
// window.DB_SELF[receiverUid] = window.DB_SELF[receiverUid];
// } else {
// window.DB_SELF[receiverUid] = [];
// }
log(`window.DB_SELF `, window.DB_SELF, receiverUid),
window.DB_SELF[receiverUid] = window.DB_SELF[receiverUid] || [];
log(`window.DB_SELF `, window.DB_SELF, receiverUid),
window.DB_SELF[receiverUid].push(temp);
let newsList = window.DB_SELF[receiverUid];
log(`DB_SELF old`, newsList);
window.DB_SELF[receiverUid] = getUniqueObjects(newsList, `msgId`);
log(`DB_SELF new`, window.DB_SELF[receiverUid]);
// window.DB[receiverUid].push(temp);
// let newsList = window.DB[receiverUid];
// log(`news list old`, newsList);
// window.DB[receiverUid] = getUniqueObjects(newsList, `msgId`);
// log(`news list new`, window.DB[receiverUid]);
}
// delay update
// window.IS_NEW_MSG = true;
// autoSetRedPoint();
autoRefreshEvent();
};
B page
// let log = console.log;
newMessageHandler(e) {
this.autoShowMessage();
log(`%c receiverNewMessage`, `color: green;`, e);
},
document.addEventListener("newMessage", this.newMessageHandler, false);
refs
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
