[jQuery] イベントをバインドする（.bind）

投稿日：2018年11月3日更新日：2018年11月7日

指定した要素にイベントをイベントをバインドするには、.bindを使用します。

サンプルソース

例）要素d1に対してclickイベントをバインドする

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  //#d1要素にclickイベントをバインドする
  $('#d1').bind("click", function(){
    console.log('クリックされました。');
  });
});
</script>
</head>
<body>
  <div id="d1">ここをクリックしてください。</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Sample</title>

$(function(){

//#d1要素にclickイベントをバインドする

$('#d1').bind("click", function(){

console.log('クリックされました。');

});

</script>

</head>

<body>

<div id="d1">ここをクリックしてください。</div>

</body>

</html>

【主要イベント】
click	クリックイベント
dblclick	ダブルクリックイベント
focusin	フォーカスインイベント
focusout	フォーカスアウトイベント
submit	SUBMITイベント
mouseleave	マウスリーブイベント

解説

イベントバブリング（引き続き呼ばれるイベントや処理）を中止したい場合は、
return falseを指定します。
要素が対応していないイベントを指定した場合は無視されます。
（div要素にfocusinを指定した場合など）
ちなみに、bind、unbindは非推奨となっています。
（on、offを使用してください）

[jQuery] イベントをバインドする（.bind）

サンプルソース

例）要素d1に対してclickイベントをバインドする

解説

関連項目