「jQuery入門」bindイベントのサンプル

2021年2月22日

書式
bind(type, [data], fn)
イベントハンドラは、コールバック関数に対してイベントオブジェクトを渡します。
$(セレクタ名).bind(“イベント名", function(e,変数名){
// some code
}
使用例

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script>
    $(document).ready(function(){
    
     $("div").bind("cftCustomEvent", function(e, eName){
        $(this).text(eName + ", test message!");
        $("span").stop().css("opacity", 1)
                .text("txtName = " + eName)
                .fadeIn(50).fadeOut(2000);
    });
    $("button").click(function () {
      $("div").trigger("cftCustomEvent", [ "testuser007" ]);
    });

  });
  </script>
  <style>
  div { color:green; }
  span { color:red; }
  </style>
</head>
<body>
  <div>カスタマイベント.</div>
  <button>テスト</button>
  <span style="display:none;"></span>
</body>
</html>

 

jQuery

Posted by arkgame