modeverv/JavaScript_CustomEventAndPrototypeBaseObjective.html

## JavaScript_CustomEventAndPrototypeBaseObjective.html
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  </head>
  <body>
    <div id="d1" style="background-color:red;height:100px">
      ターゲット1(生JavaScript)
    </div>
    <div id="d2" style="background-color:yellow;height:100px">
      発生源1(生JavaScript)
    </div>
    <div id="d3" style="background-color:green;height:100px">
      ターゲット2(jQuery)
    </div>
    <div id="d4" style="background-color:lightblue;100px;height:100px">
      発生源2(jQuery)
    </div>

    <script>
      // イベント
      // 生JavaScript
      var d1 = document.getElementById("d1");

      d1.addEventListener("myevent",function(){
         alert("myevent fired");
      });

      var d2 = document.getElementById("d2");
      d2.addEventListener("click",function(){
        var event = document.createEvent("HTMLEvents");
        event.initEvent("myevent",true,true);
        d1.dispatchEvent(event);
      });
      // イベント
      // jQuery
      $("#d3").on("my-ev",function(){ alert("my-ev fired"); });
      $("#d4").on("click",function(){
        $("#d3").trigger("my-ev");
      });

      // プロトタイプベースのオブジェクト指向(継承とか知らん)
      var Hoge = function(){};
      Hoge.prototype.bar = function(){ console.log(this.x); };
      Hoge.prototype.x = 999;
      var obj1 = new Hoge();
      obj1.x = 10;
      var obj2 = new Hoge();
      obj2.x = 20;
      var obj3 = new Hoge();
      obj1.bar();
      obj2.bar();
      obj3.bar();
    </script>
  </body>
</html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	</head>
	<body>
	<div id="d1" style="background-color:red;height:100px">
	ターゲット1(生JavaScript)
	</div>
	<div id="d2" style="background-color:yellow;height:100px">
	発生源1(生JavaScript)
	</div>
	<div id="d3" style="background-color:green;height:100px">
	ターゲット2(jQuery)
	</div>
	<div id="d4" style="background-color:lightblue;100px;height:100px">
	発生源2(jQuery)
	</div>

	<script>
	// イベント
	// 生JavaScript
	var d1 = document.getElementById("d1");

	d1.addEventListener("myevent",function(){
	alert("myevent fired");
	});

	var d2 = document.getElementById("d2");
	d2.addEventListener("click",function(){
	var event = document.createEvent("HTMLEvents");
	event.initEvent("myevent",true,true);
	d1.dispatchEvent(event);
	});
	// イベント
	// jQuery
	$("#d3").on("my-ev",function(){ alert("my-ev fired"); });
	$("#d4").on("click",function(){
	$("#d3").trigger("my-ev");
	});

	// プロトタイプベースのオブジェクト指向(継承とか知らん)
	var Hoge = function(){};
	Hoge.prototype.bar = function(){ console.log(this.x); };
	Hoge.prototype.x = 999;
	var obj1 = new Hoge();
	obj1.x = 10;
	var obj2 = new Hoge();
	obj2.x = 20;
	var obj3 = new Hoge();
	obj1.bar();
	obj2.bar();
	obj3.bar();
	</script>
	</body>
	</html>