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>