teramako/mutationObserverAndCustomEvent.html

## mutationObserverAndCustomEvent.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mutation Observer and Custom Event</title>
</head>
<body>
<h1>Mutation Observer and Custom Event</h1>

<button onclick="insertNode()">Node Insert</button>

<div id="out"></div>
<script>
// ======= AutoPager =================
var pageNumber = 1;

// MutationObserver で childList を監視し CustomEvent を投げる
var observer = new MutationObserver(function(mutations) {
  var m = mutations[0];
  if (m.type !== "childList")
    return;

  var node = m.addedNodes[0];
  var evt = new CustomEvent("NewPageInserted", {
    bubbles: true,
    cancelable: true,
    detail: {
      pageNumber: node.dataset.pagenumber
    }
  });
  console.log(evt);
  node.dispatchEvent(evt);
  observer.disconnect();
});
// Node を追加する関数
function insertNode() {
  var out = document.getElementById("out");
  observer.observe(out, { childList: true });

  var range = document.createRange();
  var f = range.createContextualFragment(
    '<section data-pagenumber="' + pageNumber + '">' +
      '<div class="content">content ' + pageNumber + '</div>' +
      '<div class="newPaege">page ' + pageNumber + '</div>' +
    '</section>'
  );
  ++pageNumber;
  range.detach();
  out.appendChild(f);
}
// ===================================

// ======= 他のスクリプト ============
// 何らかの理由でページが追加されたことを知りたい場合に設置
var serializer = new XMLSerializer();
document.body.addEventListener("NewPageInserted", function(aEvent) {
  console.log(aEvent.type, serializer.serializeToString(aEvent.target), aEvent.detail);
}, false);
// ===================================
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Mutation Observer and Custom Event</title>
	</head>
	<body>
	<h1>Mutation Observer and Custom Event</h1>

	<button onclick="insertNode()">Node Insert</button>

	<div id="out"></div>
	<script>
	// ======= AutoPager =================
	var pageNumber = 1;

	// MutationObserver で childList を監視し CustomEvent を投げる
	var observer = new MutationObserver(function(mutations) {
	var m = mutations[0];
	if (m.type !== "childList")
	return;

	var node = m.addedNodes[0];
	var evt = new CustomEvent("NewPageInserted", {
	bubbles: true,
	cancelable: true,
	detail: {
	pageNumber: node.dataset.pagenumber
	}
	});
	console.log(evt);
	node.dispatchEvent(evt);
	observer.disconnect();
	});
	// Node を追加する関数
	function insertNode() {
	var out = document.getElementById("out");
	observer.observe(out, { childList: true });

	var range = document.createRange();
	var f = range.createContextualFragment(
	'<section data-pagenumber="' + pageNumber + '">' +
	'<div class="content">content ' + pageNumber + '</div>' +
	'<div class="newPaege">page ' + pageNumber + '</div>' +
	'</section>'
	);
	++pageNumber;
	range.detach();
	out.appendChild(f);
	}
	// ===================================

	// ======= 他のスクリプト ============
	// 何らかの理由でページが追加されたことを知りたい場合に設置
	var serializer = new XMLSerializer();
	document.body.addEventListener("NewPageInserted", function(aEvent) {
	console.log(aEvent.type, serializer.serializeToString(aEvent.target), aEvent.detail);
	}, false);
	// ===================================
	</script>
	</body>
	</html>