jQuery APIリファレンスイベント操作：イベントハンドリング
- bind(type[, data], fn)〔マッチした各要素に対するclickなどのイベントをハンドラに結びつける〕
- one(type[, data], fn)〔マッチした各要素に対し、一度だけ実行するイベントとをハンドラに結び付ける〕
- trigger(event[, data])〔マッチした各要素に指定したイベントを実行〕
- triggerHandler(event[, data])〔ブラウザのデフォルト動作やイベントを実行することなく、要素に結び付けられたイベントハンドラのみを実行 〕
- unbind([type[, fn]])〔マッチした各要素からバインドされたイベントを解除（bind()の逆）〕
bind(type[, data], fn)
マッチした各要素に対するclickなどのイベントをハンドラに結びつける
2009/2/27
マッチした各要素で指定したイベントが発生した時に、指定したコールバック関数を実行するよう、各要素のイベントをハンドラに結び付けます。
利用可能なイベントは、blur、focus、load、resize、scroll、unload、beforeunload、click、dblclick、 mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、 submit、keydown、keypress、keyup、errorです。 その他、カスタムイベントも指定可能です。
イベントハンドラは、デフォルト動作を防ぐために使用可能なイベントオブジェクトに渡されます。 デフォルト動作とイベントの動作の両方を停止するには、ハンドラにFALSEを返してください。 これは、同じ要素上にある他のjQueryハンドラではなく、親要素上にあるハンドラが動作することを防ぎます。 イベントオブジェクト上で利用可能あプロパティの全一覧は、jQuery.Eventを参照してください。
多くの場合、イベントハンドラを匿名関数として定義することができます。 それが可能でないときに、第2引数として追加のデータ（と第3引数としてハンドラ関数）を渡すことができます。
第1引数typeには、イベントタイプを指定します。複数指定する場合は、半角スペース区切りで指定します。
オプションの第2引数dataにはevent.dataとしてイベントハンドラに渡される追加データを指定します。
第3引数fnにはマッチした各要素にイベントを結びつけるための関数を指定します。この関数はイベントオブジェクトに渡されます。
function callback(eventObject){ this; /* document */ }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>イベント操作：イベントハンドリング：bindの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#sample").bind("click", function(e){
var str="X座標：<strong>"+e.pageX+"</strong>、Y座標：<strong>"+e.pageY+"</strong>";
$("#res").html("クリックが発生した位置は、"+str+"です。");
});
$("#sample").bind("dblclick", function(){
$("#res").html("<strong> "+this.tagName+"</strong>要素がダブルクリックされました。");
});
$("#sample").bind("mouseenter mouseleave", function(e){
$(this).toggleClass("over");
});
});
</script>
<!-- CSS -->
<style type="text/css">
#sample { background:yellow; font-weight:bold; cursor:pointer; padding:5px; }
.over { background: #ccc; }
#res { color:red; }
</style>
</head>
<body>
<div id="wrap">
<h1>イベント操作：イベントハンドリング：bindの使用例 | jQuery</h1>
<p>▼段落をクリック、ダブルクリックしてください。この場合座標はウィンドウからの相対位置になります。</p>
<!-- CODE -->
<p id="sample">ここを「クリック」または「ダブルクリック」してください。</p>
<p id="res"></p>
<!-- CODE / -->
</div>
</body>
</html>
右クリック禁止
参照：Fast Tip: How to cancel right click context menu in jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>イベント操作：イベントハンドリング：bindの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(this).bind("contextmenu",function(e){
return false;
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>イベント操作：イベントハンドリング：bindの使用例 | jQuery</h1>
<p>このページ上での右クリックを無効にしています。</p>
<p>Firefox、IE 6、IE 7、Safari、Chromeで動作します</p>
<p>参照：<a href="http://yensdesign.com/2008/12/fast-tip-how-cancel-right-click-context-menu-jquery/">Fast Tip: How to cancel right click context menu in jQuery</a></p>
</div>
</body>
</html>
Google風のAjaxローダー
参照：How to build a Google like Ajax loader: the red loading... bar
外部ファイルを読込んでいる間、ページの左上に「Loading content...」というローディング表示をし、読込完了時にそれを非表示にします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>イベント操作：イベントハンドリング：bindの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* ajaxをコールする度にローディング表示 */
$("#loading").bind("ajaxSend", function(){
$(this).show();
}).bind("ajaxComplete", function(){
$(this).hide();
});
});
function ajaxLoad(){
/* ajaxで外部ファイルを読込みます */
$("#loadedContent").html("").load('/content/demo/loading.php');
}
</script>
<!-- CSS -->
<style type="text/css">
/* ajax loader */
#loading{ position:fixed; top:0; left:0; z-index:5000; padding:2px; background-color:red; color:#fff; font-size:150%; display:none; }
</style>
</head>
<body>
<div id="wrap">
<h1>イベント操作：イベントハンドリング：bindの使用例 | jQuery</h1>
<h2>Google風のAjaxローダー</h2>
<p>参照：<a href='http://blog.4webby.com/posts/view/7/how_to_build_a_google_like_ajax_loader_the_red_loading_bar'>How to build a Google like Ajax loader: the red loading... bar</a></p>
<p>外部ファイルを読込んでいる間、ページの左上に「Loading content...」というローディング表示をし、読込完了時にそれを非表示にします。</p>
<!-- CODE -->
<p><input type="button" onclick="ajaxLoad()" value="外部ファイル読込処理実行" /></p>
<div id="loadedContent"></div>
<div id="loading">Loading content...</div>
<!-- / CODE -->
</div>
</body>
</html>
one(type[, data], fn)
マッチした各要素に対し、一度だけ実行するイベントとをハンドラに結び付ける
2009/2/27
マッチした各要素で指定したイベントが発生した時に、指定したコールバック関数を1度だけ実行するよう、各要素のイベントをハンドラに結び付けます。
イベントが要素に対して1度しか実行されないことを除いて、bind()と同じです。 イベントハンドラは、デフォルト動作をさせないために使用するイベントオブジェクトに渡されます。 デフォルト動作とイベント動作の両方を停止には、ハンドラにFALSEを返してください。
多くの場合、イベントハンドラは、匿名関数として定義することができます。 それが可能でないなら、第2引数（と第3引数のハンドラ関数）として追加データを渡すことができます。
第1引数typeには、イベントのタイプを指定します。
オプションの第2引数dataにはevent.dataとしてイベントハンドラに渡す追加データを指定します。
第3引数fnにはマッチした各要素に指定したイベントを結び付ける関数を指定します。
function callback(eventObject){ this; /* DOM要素 */ }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>イベント操作：イベントハンドリング：oneの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var n=0;
$("#sample div").one("click", function(){
var index=$("#sample div").index(this);
$(this).css({borderStyle:"inset",cursor:"auto"});
$("#res").html("インデックス番号<strong>#"+index+"</strong>のdiv要素がクリックされました。<br>合計クリック数は<strong>"+ ++n +"</strong>です。").css("color","red");
});
});
</script>
<!-- CSS -->
<style type="text/css">
#sample div { width:60px; height:60px; margin:5px; float:left; background:green; border:5px outset; cursor:pointer; }
</style>
</head>
<body>
<div id="wrap">
<h1>イベント操作：イベントハンドリング：oneの使用例 | jQuery</h1>
<p>▼緑の四角をそれぞれ1回クリックしてください。</p>
<!-- CODE -->
<div id="sample" class="cf">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<p id="res"></p>
<!-- CODE / -->
</div>
</body>
</html>
trigger(event[, data])
マッチした各要素に指定したイベントを実行
2009/2/27
マッチした各要素に、指定したイベントを実行します。
"click"、"submit"など、第1引数eventに指定したイベントと同じ名前のブラウザのデフォルト動作を引き起こしますが、イベントで結び付けた関数にFALSEを返させるでデフォルト動作を防ぐことができます。
実行されるイベントは、ブラウザベースのイベントでないといけないという制限がないため、bind()で登録したカスタムイベントも実行することができます。
このイベントハンドラは、標準化されたイベントオブジェクトを受け取ります。 ブラウザ指定属性（keyCode、pageX、pageYのようなもの）は含まれません。
jQueryは名前空間イベントをサポートしています。 名前空間を直接参照することなく、結び付けたハンドラのグループをtrigger()やunbind()することができます。 名前空間を持たないハンドラだけを指定した順に実行するには、イベントタイプの末尾に「!」を付けてください。
jQuery v1.3からは、すべてのtiggerイベントは、DOMツリーを遡って実行されるようになりました。 例えば、p要素上でイベントを発生させると、その要素に対して最初にイベントが実行され、次に、親要素に、そしてその親にイベントを実行するというようにドキュメントを上へとたどっていきます。 そのイベントオブジェクトは、最初イベントが実行された要素と同じa.targetプロパティを持っています。 stopPropagetion()を呼んだり、コールバック関数からFALSEを返すことで、イベントの発生を防ぐことができます。
開発者は、イベントオブジェクトのコンストラクタを使用して、イベントオブジェクトを作成することができます。 イベントオブジェクトで利用可能なプロパティの全一覧は、jQuery.Eventドキュメントを参照してください。
イベントのタイプの指定方法は3つあります。
イベント名（タイプ）を文字列で渡すことができます。
jQuery.Event.objectを使用することができます。このオブジェクトの中にデータを格納したり、実行したハンドラでリーチすることができます。
データと一緒に文字通りのオブジェクトを渡すことができます。それは本物のjQuery.Event.objectにコピーされます。
第1引数typeには、実行するイベントオブジェクトまたはイベントタイプを指定します。
オプションの第2引数dataには、イベントオブジェクトの後にイベントハンドラに引数として渡す追加データを配列で指定します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>イベント操作：イベントハンドリング：triggerの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var n=0;
$("button:first").click(function(){
update($("span:first"));
});
$("button:last").click(function(){
$("button:first").trigger("click");
update($("span:last"));
});
function update(j) {
var n = parseInt(j.text(), 10);
j.text(n + 1);
}
});
</script>
<!-- CSS -->
<style type="text/css">
span { color:red; font-weight:bold; }
</style>
</head>
<body>
<div id="wrap">
<h1>イベント操作：イベントハンドリング：triggerの使用例 | jQuery</h1>
<p>▼ボタン#2をクリックすると、ボタン#1のクリックイベントも引き起こします。</p>
<!-- CODE -->
<p><button>Button #1</button> <button>Button #2</button></p>
<p><span>0</span> button #1 clicks.<br><span>0</span> button #2 clicks.</p>
<!-- CODE / -->
</div>
</body>
</html>
triggerHandler(event[, data])
ブラウザのデフォルト動作やイベントを実行することなく、要素に結び付けられたイベントハンドラのみを実行
2009/2/27
ブラウザのデフォルト動作やイベントを実行することなく、要素に結び付けたイベントハンドラすべてを実行します。
このメソッドは、下記の2点を除き、trigger()と同じ動作をします。
ブラウザのデフォルト動作を行わずに、実行すること。
-
イベントは、jQueryコレクション内の最初の要素上にだけ実行されること。
このメソッドは、連鎖可能なjQueryオブジェクトの代わりに実行されたハンドラの戻り値を返します。 jQueryコレクションが空の場合は、「undefined」を返します。
第1引数typeには、実行するイベントタイプを指定します。
オプションの第2引数dataには、イベントオブジェクトの後に引数としてイベントハンドラに渡す追加データを指定します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>イベント操作：イベントハンドリング：triggerHandlerの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("<span> フォーカスがあたりました！</span>").appendTo("#res").css("color","red").fadeOut(1000);
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>イベント操作：イベントハンドリング：triggerHandlerの使用例 | jQuery</h1>
<p>▼フォーカスイベント上でtiggerHandler()が呼ばれた場合、ブラウザのデフォルトフォーカス動作は起こらず、<br> イベントハンドラだけがフォーカスイベントに結びつきます。</p>
<!-- CODE -->
<p><button id="old">.trigger("focus")</button> <button id="new">.triggerHandler("focus")</button></p>
<input type="text" value="To Be Focused"/><span id="res"></span>
<!-- CODE / -->
</div>
</body>
</html>
unbind([type[, fn]])
マッチした各要素からバインドされたイベントを解除（bind()の逆）
2009/2/27
bind()の逆。 マッチした各要素に結び付けたイベントを解除します。 引数を省略すると、結び付けたイベントがすべて解除されます。 bind()で登録したカスタムイベントも解除することができます。
第1引数typeを指定すると、結び付けたイベントのうち、そのイベントタイプのイベントだけが解除されます。 第2引数fnに結び付けるために渡された関数を指定すると、指定したイベントハンドラだけが解除されます。
jQueryは、名前空間イベントをサポートしています。 直接それらを参照することなしに、指定したバンドされたハンドラのグループを実行したり解除することができます。
オプションの第1引数typeには、解除するイベントタイプを指定します。
オプションの第2引数fnには、マッチした各要素に結び付けたイベントを解除する関数を指定します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>イベント操作：イベントハンドリング：unbindの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
function aClick() {
$("#sample").show().fadeOut("slow");
}
$("#bind").click(function () {
// could use .bind('click', aClick) instead but for variety...
$("#theone").click(aClick).text("クリックできます！");
});
$("#unbind").click(function () {
$("#theone").unbind('click', aClick).text("クリックできません...");
});
});
</script>
<!-- CSS -->
<style type="text/css">
#sample { display:none; }
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
</head>
<body>
<div id="wrap">
<h1>イベント操作：イベントハンドリング：unbindの使用例 | jQuery</h1>
<p>▼フォーカスイベント上でtiggerHandler()が呼ばれた場合、ブラウザのデフォルトフォーカス動作は起こらず、<br> イベントハンドラだけがフォーカスイベントに結びつきます。</p>
<!-- CODE -->
<p>
<button id="theone">クリックできません...</button> <span id="sample">クリック！</span>
</p>
<p>
<button id="bind">クリックを結び付けます</button>
<button id="unbind">結びつけたクリックを削除します</button>
</p>
<!-- CODE / -->
</div>
</body>
</html>