Custom Events in JavaScript

最新推荐文章于 2024-08-30 19:40:31 发布

likaiwalkman_Victor

最新推荐文章于 2024-08-30 19:40:31 发布

阅读量379

点赞数

分类专栏： Javascript

Javascript 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="UTF-8" />
    <title>Custom event delegation in JavaScript</title>
    <link type="text/stylesheet" href="app.css" />
  </head>
  <body>
    <h1>Custom Events in JavaScript</h1>
    <p>
		This demonstration creates a new event type named "newMessage" which is fired whenever a valid message is
		submitted. The event can be delegated to any number of subscribers.
	</p>
    
    <form id="msgbox" action="http://bing.com" method="get">
      <fieldset>
		<label for="msg">your message</label> 
		<input id="msg" value="" /> 
		<button>SEND</button>
	  </fieldset>
    </form>
    <pre id="log">
Event information log
=====================
</pre>
    <script src="app.js"></script>
  </body>
</html>

app.css

body
{
	font-family: arial, helvetica, freesans, sans-serif;
	font-size: 100%;
	color: #333;
	background-color: #ddd;
}

h1
{
	font-size: 1.5em;
	font-weight: normal;
	margin: 0;
}

pre
{
	height: 20em;
	font-family: monospace;
	font-size: 1em;
	padding: 2px 5px;
	color: #0f0;
	background-color: #111;
	border: 1px solid #030;
	border-radius: 4px;
	overflow: auto;
}

fieldset
{
	padding: 10px;
	border-radius: 10px;
}

label, input, button
{
	display: block;
	width: 80%;
	font-size: 1em;
	text-align: center;
	margin: 2px auto;
}

button
{
	width: 10em;
	font-weight: bold;
}

app.js:

// elements
var
body = document.body,
msgbox = document.getElementById("msgbox"),
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) {
	var _msg = "Event subscriber on " + e.currentTarget.nodeName + ", " +e.detail.time.toLocaleString() + ": " + e.detail.message;
	//console.log( _msg );
	LogEvent( _msg);
}

// new message: raise newMessage event
function SendMessage(e) {
 
 e.preventDefault();
 var msg = document.getElementById("msg").value.trim();
 
 if (msg && window.CustomEvent) {
  var event = new CustomEvent("newMessage", {
    detail : {
     message : msg,
     time : new Date(),
    },
    bubbles : true,
    cancelable : true
   });
  
  e.currentTarget.dispatchEvent(event);
 }
}

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