javascript 自定义事件$ .trigger（）

Posted 2021-05-04

<form id="msgbox" action="#" method="get">
<fieldset>
<label for="msg">your message</label>
<input id="msg" value="" />
<button>SEND</button>
</fieldset>
</form>

// elements
var log = $("#log")[0];

// form submit handler
$("#msgbox").on("submit", SendMessage);


// newMessage event subscribers
$(document).on("newMessage", newMessageHandler);
$("body").on("newMessage", newMessageHandler);
$("#msgbox").on("newMessage", newMessageHandler);


// newMessage event handler
function newMessageHandler(e) {
	LogEvent(
		"Event subscriber on "+e.currentTarget.nodeName+", "
		+e.time.toLocaleString()+": "+e.message
	);
}


// new message: raise newMessage event
function SendMessage(e) {

	e.preventDefault();
	var msg = $("#msg").val().trim();
	if (msg) {
		$.event.trigger({
			type: "newMessage",
			message: msg,
			time: new Date()
		});
	}

}


// log event in console
function LogEvent(msg) {
	log.textContent += msg + "\n";
	var ot = log.scrollHeight - log.clientHeight;
	if (ot > 0) log.scrollTop = ot;
}
</s