Cartman0/ClickEventTest.html

## ClickEventTest.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mouce Event</title>
    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css">
    <style>
      html, body {
        font-family: 'Noto Sans Japanese', sans-serif;
      }

      #click-space {
        width: 20rem;
        height: 10rem;
        border: .1rem solid #333;
        border-radius: .3rem;
      }

      p {
        margin: .5rem 0;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Click Test</h1>
    </header>

    <main>
      <div id="click-space">
        <h2>Click Space</h2>
      </div>
      <button id="btn-reset">reset</button>
      <div id="msg">
      </div>
    </main>

      <script>
        window.onload = function(){
          var click_space = document.getElementById('click-space');
          var msg = document.getElementById('msg');

          // MouseEvent
          (function() {
            click_space.addEventListener('mousedown', mouseDown);
            function mouseDown(event) {
              msg.appendChild(createP('mousedown'));
              console.log('mousedown');
              console.log(event);
            }

            click_space.addEventListener('mouseup', mouseUp);
            function mouseUp(event) {
              msg.appendChild(createP('mouseup'));
              console.log('mouseup');
              console.log(event);
            }

            click_space.addEventListener('click', click);
            function click(event) {
              msg.appendChild(createP('click'));
              console.log('click');
              console.log(event);
            }

            click_space.addEventListener('dblclick', dblClick);
            function dblClick(event) {
              msg.appendChild(createP('dblclick'));
              console.log('dblclick');
              console.log(event);
            }

            click_space.addEventListener('contextmenu', contextmenu);
            function contextmenu(event) {
              msg.appendChild(createP('contextmenu'));
              console.log('contextmenu');
              console.log(event);
            }

            function createP(inner){
              var p = document.createElement('p');
              p.innerHTML = inner;
              return p;
            }
          })();

          // Reset
          (function() {
            var btn = document.getElementById('btn-reset');
            btn.addEventListener('click', function(event){
              removeEverything(msg);
            });

            function removeEverything(element) {
              while (element.firstChild) {
                element.firstChild.remove();
              }
            }
          })();
        };
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Mouce Event</title>
	<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css">
	<style>
	html, body {
	font-family: 'Noto Sans Japanese', sans-serif;
	}

	#click-space {
	width: 20rem;
	height: 10rem;
	border: .1rem solid #333;
	border-radius: .3rem;
	}

	p {
	margin: .5rem 0;
	}
	</style>
	</head>
	<body>
	<header>
	<h1>Click Test</h1>
	</header>

	<main>
	<div id="click-space">
	<h2>Click Space</h2>
	</div>
	<button id="btn-reset">reset</button>
	<div id="msg">
	</div>
	</main>

	<script>
	window.onload = function(){
	var click_space = document.getElementById('click-space');
	var msg = document.getElementById('msg');

	// MouseEvent
	(function() {
	click_space.addEventListener('mousedown', mouseDown);
	function mouseDown(event) {
	msg.appendChild(createP('mousedown'));
	console.log('mousedown');
	console.log(event);
	}

	click_space.addEventListener('mouseup', mouseUp);
	function mouseUp(event) {
	msg.appendChild(createP('mouseup'));
	console.log('mouseup');
	console.log(event);
	}

	click_space.addEventListener('click', click);
	function click(event) {
	msg.appendChild(createP('click'));
	console.log('click');
	console.log(event);
	}

	click_space.addEventListener('dblclick', dblClick);
	function dblClick(event) {
	msg.appendChild(createP('dblclick'));
	console.log('dblclick');
	console.log(event);
	}

	click_space.addEventListener('contextmenu', contextmenu);
	function contextmenu(event) {
	msg.appendChild(createP('contextmenu'));
	console.log('contextmenu');
	console.log(event);
	}

	function createP(inner){
	var p = document.createElement('p');
	p.innerHTML = inner;
	return p;
	}
	})();

	// Reset
	(function() {
	var btn = document.getElementById('btn-reset');
	btn.addEventListener('click', function(event){
	removeEverything(msg);
	});

	function removeEverything(element) {
	while (element.firstChild) {
	element.firstChild.remove();
	}
	}
	})();
	};
	</script>
	</body>
	</html>