大致介紹
jQuery增加了并擴展了基本的事件處理機制，不但提供了更加優雅的事件處理語法，而且極大地增強了事件處理能力
jQuery中的事件
加載DOM
在jQuery中是用$(document).ready()方法來替代JavaScript中的window.onload方法的，但是他們也有一些不同點
1、執行時機
例如我們有一個有很多圖片的網頁
$(document).ready()方法是在這個網頁的DOM樹加載完就可以執行的，而window.onload方法必須在DOM樹加載完和圖片都加載完才執行
如果使用jQuery我們想要在整個頁面加載完在執行可以使用load()方法
下面兩段代碼的功能是一樣的
// jQuery $(window).load(function(){ // 代碼1 }); // JavaScript window.onload = function(){ // 代碼2 };2、多次使用
JavaScript的onload事件一次只能保存對一個函數的引用，而$(document).ready()可以保存多個
function one(){ alert('1'); } function two(){ alert('2'); } // JavaScript window.onload = one; window.onload = two;//只執行two() // jQuery $(document).ready(function(){ one(); }); $(document).ready(function(){ two(); });//one() 和 two()都會執行3、簡寫方式
$(document).ready(function(){});可以簡寫為$(function(){});
事件綁定
bind()函數的語法：bind(type,[.data],fn)
第一個參數是事件類型
第二個參數是可選參數，作為event.data屬性值傳遞給事件對象的額外數據對象
第三個參數是用來綁定的處理函數
用例子來看，有兩個div，第二個div隱藏，當我們點擊第一個div時，第二個div顯示
<div id="div1"></div> <div id="div2"></div> <script type="text/javascript"> $(function(){ $('#div1').bind('click',function(){ $(this).next().show(); }); });增加功能，當點擊div1時如果div2是顯示的，則隱藏它，否則就顯示它
$(function(){ $('#div1').bind('click',function(){ if($(this).next().is(':visible')){ $(this).next().hide(); }else{ $(this).next().show(); } }); });簡寫：
$('#div1').click(function(){ if($(this).next().is(':visible')){ $(this).next().hide(); }else{ $(this).next().show(); } })合成事件
1、hover()方法
用于模擬光標懸停事件。當光標移動到元素上時觸發第一個函數，當光標移出元素時，會觸發第二個函數
$('#div1').hover(function(){ $(this).next().show(); },function(){ $(this).next().hide(); });2、toggle()方法
用于模擬鼠標連續單擊事件，當鼠標第一次點擊元素，觸發第一個函數，當鼠標點擊同一個函數時觸發第二個函數
$('#div1').toggle(function(){ $(this).next().show();},function(){ $(this).next().hide();}); 阻止事件冒泡和阻止默認行為
1、阻止事件冒泡
stopPropagation()方法
2、阻止默認行為
preventDefault()方法
注意：1、return false 在jQuery中是即阻止事件冒泡又阻止默認行為
2、jQuery不支持事件捕獲
事件對象的屬性
1、event.type
改方法的作用是獲取到事件的類型
$('#div1').click(function(ev){ alert(ev.type);//click })2、event.target
獲取到觸發事件的元素
$('#div1').click(function(ev){ alert(ev.target.id);//div1 })3、event.relatedTarget
獲取相關元素
4、event.pageX和event.pageY
獲取到光標相對于頁面的x的坐標和y的坐標
$('#div1').click(function(ev){ alert(ev.pageX + ',' + ev.pageY);//275,181 })5、event.which
該方法的作用是在鼠標單擊事件中獲取到鼠標的左、中、右鍵；在鍵盤事件中獲取鍵盤的按鍵
$('#div1').click(function(ev){ alert(ev.which);//1是鼠標左鍵，2是鼠標中見，3是鼠標右鍵})移除事件
unbind()方法語法： unbind([type],[data]);
第1個參數是事件類型，第2個參數是將要移除的函數
看一個例子，為div1綁定如下事件
$('#div1').bind('click',function(){ alert('1'); }).bind('click',function(){ alert('2'); }).bind('mouseover',function(){ alert('3'); })1、如果沒有參數，則刪除所有綁定的事件
$('#div1').unbind();//刪除所有事件
2、如果提供了事件類型作為參數，則只刪除該類型的綁定事件
$('#div1').unbind('mouseover');//刪除mouseover事件
3、如果把綁定時傳遞的處理函數作為第2個參數，則只有這個特定的時間處理函數會被刪除
模擬操作
1、常用模擬
在jQuery中可以使用trigger()方法完成模擬操作，例如可以使用下面的代碼來觸發id為btn的按鈕的click事件
$('#btn').trigger('click');
2、觸發自定義事件
trigger()方法不僅能觸發瀏覽器支持的具有相同名稱的事件，也可以觸發自定義名稱的事件。
$('#btn').bind('myclick',function(){ alert('1');});$('#btn').trigger('myclick');3、傳遞數據
$('#btn').bind('myclick',function(event,message1,message2){ alert(message1 + message2);});$('#btn').trigger('myclick',["1","2"]);4、執行默認操作
$('input').trigger('focus');
以上代碼會觸發input元素的focus事件，也會使<input>元素本身得到焦點
如果只想觸發<input>元素上綁定的特定事件，同時取消瀏覽器對此事件的默認操作可以使用triggerHandler()方法
其他用法
添加事件命名空間，便于管理
例如可以把元素綁定的多個事件類型用命名空間規范起來
$('div').bind('click.plugin',function(){ alert('1'); }); $('div').bind('mouseover.plugin',function(){ alert('2'); }); $('div').bind('dbclick.plugin',function(){ alert('3'); }); $('button').click(function(){ $('div').unbind('.plugin'); })以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
