jQuery事件綁定

bind()

　　bind()方法為一個元素綁定事件處理程序，有以下3種使用方法

bind(eventType[,eventData],handler(eventObject))

　　bind()方法可以接受3個參數：第一個參數是一個或多個事件類型的字符串，或自定義事件的名稱；第二個參數是可選參數，作為event.data屬性值傳遞給事件對象的額外數據對象；第三個參數是用來綁定的事件處理函數　

<style>.entered{background-color:lightblue;}</style><script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><script>$('#btn').bind('mouseenter mouseleave', {msg:'123'},function(event) {
  $(this).toggleClass('entered');
  alert(event.data.msg)
});</script>

一般用法

　　一般地，我們用bind()方法為元素綁定一個事件處理函數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><script>$('#btn').bind('click',function(){
    alert(1);
});</script>

簡化用法

　　jQuery庫提供了標準的事件類型綁定快捷方法，比如bind('click')的快捷方法click()

　　每一種類型都可以找到它的快捷方式

blur,focus,focusin,focusout,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><script>$('#btn').click(function(){
    alert(1);
});</script>

命名空間

　　如果eventType參數字符串包含一個點(.)，那么該事件是帶命名空間的。這個點(.)將事件及其命名空間分隔開來。例如，在調用.bind('click.name', handler) ，字符串click是事件類型，而字符串name是命名空間。命名空間允許我們解除或綁定一些事件，而不會影響其他事件

　　[注意]即使是同類型的事件，命名空間不同，就不會受到影響

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><script>$('#btn').bind('click.a',function(){alert(1);})
$('#btn').bind('click.b',function(){alert(2);})
$('#btn').mouseout(function(){$(this).unbind('.b')})</script>

bind(eventType[,eventData],preventBubble)

　　bind()方法的第二種用法是第三個參數設置為false，用于防止默認事件，阻止事件冒泡。默認值是true　　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><script>$('#btn').bind('contextmenu',false);</script>

bind(events)

　　bind()的第三種用法是只有一個參數，該參數是一個對象，包含一個或多個DOM事件類型和函數并執行它們　

<style>.entered{background-color:lightblue;}</style><script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><script>$('#btn').bind({
  click: function() {
       alert(1);
  },
  mouseenter: function() {
    $(this).toggleClass('entered');
  },
  mouseleave: function(){
      $(this).toggleClass('entered');
  }
});</script>

【unbind()】

　　unbind()是bind()事件的對應事件，從元素上刪除一個以前附加的事件處理程序。每個用bind()方法綁定的事件處理程序可以使用unbind()移除

　　若unbind()方法沒有任何參數，可以刪除元素上所有綁定的處理程序

<style>.entered{background-color:lightblue;}</style><script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><button id="reset">刪除事件</button><script>$('#btn').bind({
  click: function() {
       alert(1);
  },
  mouseenter: function() {
    $(this).toggleClass('entered');
  },
  mouseleave: function(){
      $(this).toggleClass('entered');
  }
});
$('#reset').click(function(){
    $('#btn').unbind();
})</script>

　　unbind()方法可以接收一個表示事件類型的字符串，表示刪除該類事件類型的所有處理函數

<style>.entered{background-color:lightblue;}</style><script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><button id="reset">刪除事件</button><script>$('#btn').bind({
  click: function() {
       alert(1);
  },
  mouseenter: function() {
    $(this).toggleClass('entered');
  },
  mouseleave: function(){
      $(this).toggleClass('entered');
  }
});
$('#reset').click(function(){
    $('#btn').unbind('click');
})</script>

　　unbind()方法也可以接受兩個參數，第一個參數表示事件類型，第二個參數表示事件處理程序，表示刪除該事件類型的該事件處理程序

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><button id="reset">刪除事件</button><script>function handler(){
    alert(1);
}
$('#btn').bind('click',handler);
$('#btn').bind('click',function(){alert(2);});
$('#reset').click(function(){
    $('#btn').unbind('click',handler);
})</script>

　　[注意]如下用法是無法正常工作的。盡管兩個匿名函數的內容是一樣的，但是它們是在不同的地方被創建的。因此，javascript會將它們當成是不同的函數對象。若要解除綁定特定的事件處理函數，需要的是指向該函數的引用，而不是內容相同的不同函數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><button id="reset">刪除事件</button><script>$('#btn').click(function(){
    alert(1);
})
$('#reset').click(function(){
    $('#btn').unbind('click',function(){alert(1);});
})</script>

命名空間

$( "#foo" ).bind( "click.myEvents", handler );

　　上面的click事件可以以正常的方式解除：

$( "#foo" ).unbind( "click" );

　　但是，如果要避免影響其他處理程序，可以更具體

$( "#foo" ).unbind( "click.myEvents" );

　　也可以解除命名空間中所有的處理程序，無論是什么事件類型

$( "#foo" ).unbind( ".myEvents" );

事件對象

　　當解除自身內部處理程序時可以給unbind()方法傳遞event對象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><script>var timesClicked = 0;
$( "#btn" ).bind( "click", function( event ) {
  alert(++timesClicked);  if (timesClicked >= 2 ) {
    $(this).unbind(event);
  }
});
$('#btn').click(function(){alert('a')});</script>

trigger()

　　trigger()方法用來完成模擬操作，根據綁定到匹配元素的給定的事件類型執行所有的處理程序和行為

trigger(eventType[,extraParameters])

　　trigger()方法接受兩個參數eventType和extraParameters。eventType表示事件類型，而extraParameters是可選參數，表示傳遞給事件處理程序的額外數組參數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn1">按鈕</button><button id="btn2">模擬按鈕</button><script>$('#btn1').click(function(){
    alert(1);
})
$('#btn2').click(function(){
    $('#btn1').trigger('click');
})</script>

　　也可以直接用簡化寫法click()

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn1">按鈕</button><button id="btn2">模擬按鈕</button><script>$('#btn1').click(function(){
    alert(1);
})
$('#btn2').click(function(){
    $('#btn1').click();
})</script>

　　可以使用on()方法定義一個自定義事件

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><script>$('#btn').on('custom',function(event,param1,param2){
    alert(param1 + '\n' + param2);
});
$('#btn').click(function(){
    $('#btn').trigger('custom',['1','2']);
})</script>

　　[注意]傳入的extraParameters參數與傳入到bind()方法中的eventData參數是不同的。它們的機制都是向事件處理函數中傳入信息，但是傳入trigger()中的extraParameters參數是在事件發生時傳入的，而傳入到bind()中的eventData參數要求在進行事件綁定時就要事先計算好

trigger(event)

　　trigger()方法的另一種使用方法是傳入一個event對象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><script>$('#btn').click(function(){    var event = jQuery.Event("click");
    event.user = "false";
    $(document).trigger(event);    return false;
})
$(document).click(function(event){
    alert(event.user)
})</script>

【triggerHandler()】

　　triggerHandler()方法的行為與trigger()相似，不同之處有如下幾點：

　　1、triggerHandler()方法并不會觸發事件的默認行為

　　2、trigger()會影響所有與jQuery對象相匹配的元素，而triggerHandler()僅影響第一個匹配到的元素

　　3、使用triggerHandler()創建的事件，并不會在DOM樹中向上冒泡。如果事件沒有被目標元素直接處理，那么它就不會進行任何處理

　　4、與普通的方法返回jQuery對象相反，triggerHandler()返回最后一個處理的事件的返回值。如果沒有觸發任何事件，會返回undefined

triggerHandler(eventType[,extraParameters])

　　triggerHandler()方法接受兩個參數eventType和extraParameters。eventType表示事件類型，而extraParameters是可選參數，表示傳遞給事件處理程序的額外數組參數

　　如果使用trigger()觸發focus事件，那么它不只觸發綁定了該事件的處理函數，也會觸發瀏覽器默認行為，即獲得焦點

　　如果使用triggerHandler()觸發focus事件，那么它只會觸發綁定了該事件的處理函數，而瀏覽器的默認focus動作是不會被觸發的

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><input id="test"><button id="btn1">按鈕一</button><button id="btn2">按鈕二</button><script>$('#test').focus(function(){
    $(this).val(1);
})
$('#btn1').click(function(){
    $('#test').trigger('focus');
})
$('#btn2').click(function(){
    $('#test').triggerHandler('focus');
})</script>

delegate()

　　delegate()方法為所有匹配選擇器的元素綁定一個或多個事件處理函數，基于指定元素的子集，匹配的元素包括那些目前已經匹配到的元素，也包括那些今后可能匹配到的元素

delegate(selector,eventType,eventData,handler(eventObject))

　　delegate()方法包含4個參數：selector表示選擇器字符串，用于過濾器觸發事件的元素；eventType表示一個包含一個或多個用空格隔開的事件類型的字符串，比如"click"或"keydown"或自定義事件的名稱；eventData表示一個對象，它包含的數據鍵值對映射將被傳遞給事件處理程序；handler(eventObject)表示事件觸發時執行的函數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><script>$('body').delegate('#btn','click',{a:1},function(event){
    alert(event.data.a)
});</script>

delegate(selector,events)

　　delegate()方法的另一種用法是傳遞兩個參數，selector參數表示選擇器字符串，用于過濾器觸發事件的元素；而events對象包含一個或多個DOM事件類型和函數　　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><script>$('body').delegate('#btn',{    'click':function(){alert(1)},    'mouseover':function(){$(this).css('background','lightblue')},    'mouseout':function(){$(this).css('background','transparent')}
});</script>

【undelegate()】

　　undelegate()方法用于刪除當前選擇器匹配的所有元素的事件處理程序

1、 解除綁定所有事件

undelegate()

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn1">按鈕</button><button id="btn2">解綁事件</button><script>$('body').delegate('#btn1','click',{a:1},function(event){
    alert(event.data.a)
});
$('#btn2').click(function(){
    $('body').undelegate();    
})</script>

2、解除某一類型事件

undelegate(eventType)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn1">按鈕</button><button id="btn2">解綁事件</button><script>$('body').delegate('#btn1',{    'click':function(){alert(1)},    'mouseover':function(){$(this).css('background','lightblue')},    'mouseout':function(){$(this).css('background','transparent')}
});
$('#btn2').click(function(){
    $('body').undelegate('click');    
})</script>

3、解除特定元素的事件

undelegate(selector,eventType)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn1">按鈕</button><button id="btn2">解綁事件</button><script>$('body').delegate('#btn1',{    'click':function(){alert(1)},    'mouseover':function(){$(this).css('background','lightblue')},    'mouseout':function(){$(this).css('background','transparent')}
});
$('#btn2').click(function(){
    $('body').undelegate('#btn1','click');    
})</script>

4、解除特定元素綁定的對象函數的特定類型的事件

undelegate(selector,eventType,handler(eventObject))

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn1">按鈕</button><button id="btn2">解綁事件</button><script>var handler = function(){
    alert(1);
}
$('body').delegate('#btn1','click',handler);
$('#btn2').click(function(){
    $('body').undelegate('#btn1','click',handler);    
})</script>

on()

　　on()方法是bind()方法和delegate()方法的升級版

on(events[,selector][,data],handler(eventObject))

　　on()方法接受4個參數

　　第一個參數event表示一個或多個空格分隔的事件類型和可選的命名空間，或僅僅是命名空間，比如"click","keydown.myPlugin",或者".myPlugin"

　　第二個參數selector是可選參數，表示一個選擇器字符串，用于過濾出被選中的元素中能觸發事件的后代元素。如果選擇器是null或者忽略了該選擇器，那么被選中的元素總是能觸發事件

　　第三個參數data是可選參數，表示當一個事件被觸發時，要傳遞給事件處理函數的event.data

　　第四個參數handler表示事件被觸發時，執行的函數。若該函數只是執行return false，那么該參數位置可以直接簡寫成 false

1、bind()寫法

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><script>$('body').on('click',{a:1},function(event){
    alert(event.data.a)
});</script>

2、delegate()寫法

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><script>$('body').on('click','#btn',{a:1},function(event){
    alert(event.data.a)
});</script>

on(events[,selector][,data])　

　　on()方法的另一種用法可以接受三個參數

　　第一個參數event表示一個對象，鍵是由一個或多個由空格分隔的事件類型及可選的名字空間，值是這些事件類型所對應的事件處理函數

　　第二個參數selector和第三個參數data與上一種用法一樣，都是可選參數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><script>$('#btn').on({    'click':function(){alert(1)},    'mouseover':function(){$(this).css('background','lightblue')},    'mouseout':function(){$(this).css('background','transparent')}
});</script>

　　on()方法的最后一個參數不是函數，而是false時，表示取消默認事件并取消事件冒泡

$("#btn").on("click", false)

　　只取消默認事件

$("#btn").on("click", function(event) {
  event.preventDefault();
});

　　只取消冒泡

$("#btn").on("click", function(event) {
  event.stopPropagation();
});

【off()】

　　off()方法是on()方法對應的解綁事件的方法

1、移除所有事件

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn1">按鈕一</button><button id="btn2">按鈕二</button><script>$('#btn1').on('click',{a:1},function(event){
    alert(event.data.a)
});
$('#btn2').on('click',function(){
    $('#btn1').off();
});</script>

2、移除特定類型的事件

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn1">按鈕一</button><button id="btn2">按鈕二</button><script>$('#btn1').on('click mouseover',{a:1},function(event){
    alert(event.data.a)
});
$('#btn2').on('click',function(){
    $('#btn1').off('click');
});</script>

3、移除先前綁定的事件處理函數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn1">按鈕一</button><button id="btn2">按鈕二</button><script>function handler(){
    alert(1);
}
$('#btn1').on('click',handler);
$('#btn2').on('click',function(){
    $('#btn1').off('click',handler);
});</script>

one()

　　對于只需要觸發一次，隨后就要立即解除綁定的情況，jQuery提供了一種簡寫方法——one()方法。one方法可以為元素綁定處理函數，當處理函數觸發一次后，立即被刪除。即在每個對象上，事件處理函數只會被執行一次

　　one()方法的結構與on()方法類似，使用方法也相同

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><script>$('body').one('click','#btn',{a:1},function(event){
    alert(event.data.a)
});</script>

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">按鈕</button><script>$('#btn').one({    'click':function(){alert(1)},    'mouseover':function(){$(this).css('background','lightblue')},    'mouseout':function(){$(this).css('background','transparent')}
});</script>