事件處理中最頭疼的就是瀏覽器兼容問題商佛，jQuery封裝了很好的API凸主，可以方便的進(jìn)行事件處理
在1.7之前的版本中jQuery處理事件有多個(gè)方法恍飘， (google 搜索: jquery live bind degelate)作用各不相同绢彤，后來統(tǒng)一的使用on/off方法
.on( events [,selector ] [,data ], handler(eventObject) )
看起來參數(shù)及其復(fù)雜，我們看一下各個(gè)參數(shù)的意思
events：一個(gè)或多個(gè)空格分隔的事件類型和可選的命名空間颈墅，或僅僅是命名空間蜡镶，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
selector：一個(gè)選擇器字符串，用于過濾出被選中的元素中能觸發(fā)事件的后代元素精盅。如果選擇器是 null 或者忽略了該選擇器帽哑，那么被選中的元素總是能觸發(fā)事件
data：當(dāng)一個(gè)事件被觸發(fā)時(shí)，要傳遞給事件處理函數(shù)的event.data
handler(eventObject)：事件被觸發(fā)時(shí)叹俏，執(zhí)行的函數(shù)妻枕。若該函數(shù)只是要執(zhí)行return false的話，那么該參數(shù)位置可以直接簡寫成 false
看幾個(gè)例子
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<input id="ipt" type="text"> <button id="btn">添加</button>
<div id="wrap">
</div>
<script>
$('.box li').on('click', function(){
console.log(1)
var str = $(this).text()
$('#wrap').text(str)
})
//等同于
$('.box>ul>li').click(function(){
console.log(2)
var str = $(this).text()
$('#wrap').text(str)
})
//也可以這樣寫
$('.box li').on('click.hello', function(){
console.log(3)
var str = $(this).text()
$('#wrap').text(str)
})
//命名空間沒什么特別的作用粘驰，只不過在解綁事件時(shí)便于區(qū)分綁定的事件
$('.box li').off('click.hello')
//可是用如下方法新增的元素是沒綁定事件的
$('#btn').on('click', function(){
var value = $('#ipt').val()
$('.box>ul').append('<li>'+value+'</li>')
})
//我們可以用事件代理
$('.box ul').on('click', 'li', function(){
var str = $(this).text()
$('#wrap').text(str)
})
//上面代碼相當(dāng)于原生 js 的
document.querySelector('.box ul').addEventListener('click', function(e){
if(e.target.tagName.toLowerCase() === 'li'){
//do something
}
})
//綁定事件的時(shí)候我們也可以給事件附帶些數(shù)據(jù)屡谐，只不過這種用法很少見
$('.box').on('click', {name: 'hunger'}, function(e){
console.log(e.data)
})
.one( events [, selector ] [, data ], handler(eventObject) )
同 on，綁定事件蝌数，但只執(zhí)行一次
.off( events [, selector ] [, handler ] )
移除一個(gè)事件處理函數(shù)
$('.box li').off('click')
.trigger( eventType [, extraParameters ] )
根據(jù)綁定到匹配元素的給定的事件類型執(zhí)行所有的處理程序和行為
$('#foo').on('click', function() {
console.log($(this).text())
});
$('#foo').trigger('click')
其它
jQuery還提供了一些常見事件的快捷方式
