js STUDIO

.bind()

要素に任意のイベントで実行させたい関数を紐づけます。

.bind( eventType [, eventData], handler(eventObject) ) 1.0追加

戻り値:jQuery

要素に任意のイベントで実行させたい関数を紐づけます。

引数 説明
eventType "click"や"submit"などのDOMイベント名、任意に定義したカスタムイベント名の文字列を指定します。
また、スペース区切りで複数のイベントを指定することも可能です。
[eventData] マップ値を指定することで、データをイベントハンドラーに渡すことが出来ます。
handler(eventObject) 対象のイベントが発生した際に、実行したい処理を関数として指定します。 
$('#foo').bind('click', function() {
  alert('ユーザーがfooをクリックしました。');
});

$('#foo').bind('mouseenter mouseleave', function() {
  /*
    マウスポインタが要素に入った時と離れた時に、
    enteredクラスの切り替えを行います。
  */
  $(this).toggleClass('entered');
});

.bind( eventType [, eventData], preventBubble ) 1.4.3追加

戻り値:jQuery

要素に任意のイベントで実行させたい関数を紐づけます。

引数 説明
eventType "click"や"submit"などのDOMイベント名、任意に定義したカスタムイベント名の文字列を指定します。
また、スペース区切りで複数のイベントを指定することも可能です。
[eventData] マップ値を指定することで、データをイベントハンドラーに渡すことが出来ます。
preventBubble 初期値はtrue。この3番目の引数にfalseを設定すると、本来実行されるDOMイベントが実行されなくなり、 またイベントの伝搬もブロックされます。

.bind( events ) 1.4追加

戻り値:jQuery

要素に任意のイベントで実行させたい関数を紐づけます。

引数 説明
events マップ値でイベント名と関数をして、それぞれのイベント発生時に実行したい処理を指定します。 
$('#foo').bind({
  click: function() {
    // do something on click
  },
  mouseenter: function() {
    // do something on mouseenter
  }
});

サンプル

下記のコードは期待に反して、両方とも「さようなら！」が表示されます。 これはそれぞれのイベントが発生する際には、message変数が上書きされているためです。 

var message = 'こんにちは！';
$('#foo').bind('click', function() {
  //#fooがクリックしたい際にも、「さようなら！」が表示されます。
  alert(message);
});
message = 'さようなら!';
$('#bar').bind('click', function() {
  //#barがクリックしたい際に、「さようなら！」が表示されます。
  alert(message);
});

第2引数にイベントハンドラに渡したい値をマップ値として指定すると、 event.dataとして、その値を取り出すことが出来るようになります。 

var message = 'こんにちは！';
$('#foo').bind('click', {msg: message}, function(event) {
  //「こんにちは！」を表示
  alert(event.data.msg);
});
message = 'さようなら!';
$('#bar').bind('click', {msg: message}, function(event) {
  //「さようなら！」を表示
  alert(event.data.msg);
});

P要素をクリックしたい際に、そのP要素自身のテキストをアラートに表示します。 

$("p").bind("click", function(){
  alert( $(this).text() );
});

P要素をクリックしたい際に、変数fooの値をアラート表示します。 

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler);

関数でfalseを返すことによって、通常実行されるはずのsubmitアクションと伝搬処理をキャンセルしています。 

$("form").bind("submit", function() { return false; })

preventDefault()によって、通常実行されるはずのsubmitアクションのみをキャンセルしています。 

$("form").bind("submit", function(event) {
  event.preventDefault();
});

stopPropagation()によって伝搬処理のみキャンセルされ、submitアクションは実行されます。 

$("form").bind("submit", function(event) {
  event.stopPropagation();
});

デモ

カスタムイベントをバインドします。

<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; }
span { color:blue; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>カスタムイベントをバインドします。</p>
<button>カスタムイベント発火！</button>
<span style="display:none;"></span>
<script>
//カスタムイベント"myCustomEvent"をバインドします。
$("p").bind("myCustomEvent", function(e, myName, myValue){
  $(this).text(myName + "(自分)は, ここだよ!");
  $("span").stop().css("opacity", 1)
  .text("自分の名前 ： " + myName)
  .fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
  //カスタムイベント"myCustomEvent"を発生させます。
  $("p").trigger("myCustomEvent", [ "ジョン" ]);
});
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM