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

2014年9月18日2021年2月22日

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

<html>

<head>

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

</body>

</html>

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

<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

関連投稿: