javascript & global event & custom event
2024-09-01 21:16:44
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 发布文章使用：只允许注册用户才可以访问！
最新文章
- 电容参数：X5R，X7R，Y5V，COG 详解
- Python Day02
- Jsp+ Servlet+Ajax实现点赞功能
- 响应式Web初级入门
- AFNetworking(AFN)总结
- java多线程之ThreadLocal
- Eclipse 和 NetBeans 快捷键即其他常用功能比较
- 『重构--改善既有代码的设计』读书笔记----Replace Data Value with Object
- marzullo's algorithm
- 细说Handler
- java配置mongo最大连接数
- vue 自定义指令directive
- 【tensorflow】学习笔记
- UOJ#185. 【ZJOI2016】小星星 容斥原理 动态规划
- crontab清理日志
- notpad++常用操作与快捷键
- Integer包装类源码分析
- mysql trigger 触发器
- Windows系统80端口被占用
- SQLServer------聚集索引和非聚集索引的区别