jQuery
bind（）
関数はイベントハンドラを要素にアタッチするために使用され、
unbind（）
は要素から既存のイベントハンドラを切り離すために使用されます。
例
デモンストレーション用の簡単なhtmlコード。
<div id="BoxId">
Mouseover Me, Click Me or Double Click Me
</div>
<span></span>
1. bind（）
jQueryは、「クリック」、「dblclick」、カスタムイベント名などのJavaScriptイベントタイプを完全サポートしています。
“BoxId”のIDを持つ要素にワンクリックイベントをバインドします。
$("#BoxId").bind("click", (function () {
$('span').text("Single Clicked");
}));
「BoxId」のIDを持つ要素にダブルクリックイベントをバインドします。
$("#BoxId").bind("dblclick", (function () {
$('span').text("Double Clicked");
}));
2. bind（）イベントオブジェクト
jQueryには、多くのイベントオブジェクトが付属しており、ユーザーの環境に関する詳細情報を取得します。http://api.jquery.com/category/events/event-object/[jQueryイベントオブジェクトの詳細についてはこちらを参照してください。
「mouseover」イベントをイベントオブジェクトパラメータとともに「BoxId」というIDの要素にバインドします。
$("#BoxId").bind("mouseover", (function (event) {
$('span').text('The mouse cursor is at ('
+ event.pageX + ', ' + event.pageY + ')');
}));
3. bind（）イベントデータ
これは、カスタムパラメータデータをbind（）関数に渡すことを意味します。
単一のクリックイベントをバインドし、 “BoxId”というIDを持つ要素にカスタムメッセージをパラメータとして渡します。この関数の中で、
event.data
の助けを借りてパラメータメッセージにアクセスすることができます。
var name = 'Message pass by jQuery event data';
$("#BoxId").bind("click", {msg: name},(function (event) {
$('span').text("Single Clicked - " + event.data.msg);
}));
4. bind（）複数のイベント
複数のイベントを結合するには、それぞれをスペースで区切って指定します。
「BoxId」のIDを持つ要素に対して、シングルクリックイベントとダブルクリックイベントをバインドします。
$("#BoxId").bind("click dblclick", (function () {
$('span').text("Single Clicked");
}));
あるいは、以下のようにコード化することもできます:（
jQuery 1.4
でサポートされています）。
$("#BoxId").bind({
click : function(){
$('span').text("Single Clicked");
},
dblclick : function(){
$('span').text("Double Clicked");
}
});
5.アンバインド（）
既存のイベントをアンバインドまたはデタッチするのは非常に簡単で、添付されたイベントタイプを指定する必要があります。
“BoxId”というIDの要素から “click”と “dblclick”イベントを切り離しました。
$('#BoxId').unbind("click");
$('#BoxId').unbind("dblclick");
自分で試してみてください
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
.ClassA{
padding:8px;
border:1px solid blue;
}
span{
color:#CC6633;
}
</style>
</head>
<body>
<h1>jQuery bind() and unbind() example</h1>
<div id="BoxId">
Mouseover Me, Click Me or Double Click Me
</div>
<span></span>
<p>
<button id="bindButton">bind()</button>
<button id="bindMessageButton">bind(message)</button>
<button id="unbindButton">unbind()</button>
</p>
<script type="text/javascript">
$("#BoxId").bind("click", (function () {
$('span').text("Single Clicked");
}));
$("#BoxId").bind("dblclick", (function () {
$('span').text("Double Clicked");
}));
//Event object
$("#BoxId").bind("mouseover", (function (event) {
$('span').text('The mouse cursor is at ('
+ event.pageX + ', ' + event.pageY + ')');
}));
//Passing event data
$("#bindMessageButton").bind("click", (function () {
var name = 'Message pass by jQuery event data';
$("#BoxId").bind("click", {msg: name},(function (event) {
$('span').text("Single Clicked - " + event.data.msg);
}));
}));
$("#unbindButton").bind("click",(function () {
$('#BoxId').unbind("click");
$('#BoxId').unbind("dblclick");
$('#BoxId').unbind("mouseover");
$('span').text("");
}));
//added since version 1.4
$("#bindButton").bind("click",(function () {
$("#BoxId").bind({
click : function(){
$('span').text("Single Clicked");
},
dblclick : function(){
$('span').text("Double Clicked");
},
mouseover : function(event){
$('span').text('The mouse cursor is at ('
+ event.pageX + ', ' + event.pageY + ')');
}
});
}));
</script>
</body>
</html>
リンク://wp-content/uploads/jQuery/jQuery-bind-unbind-example.html[デモを試してください]
