JavaScriptのカスタムイベントとプロトタイプベースのオブジェクト指向(継承は知らん)

JavaScript

JavaScriptのカスタムイベントとプロトタイプベースのオブジェクト指向(継承
は知らん)

<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>