詳解jQuery中的事件

大致介紹

jQuery增加了並擴展了基本的事件處理機制，不但提供了更優雅的事件處理語法，而且極大地增強了事件處理能力

jQuery中的事件

加載jQuery中的事件

加載jQuery中的事件

在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(){
  $(&#39;#div1&#39;).bind(&#39;click&#39;,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不支援事件捕獲.type

　　　改方法的作用是獲取到事件的類型

$('#div1').click(function(ev){
   alert(ev.type);//click
 })

2、event.target

獲取到觸發事件的元素

$('#div1').click(function(ev){
  alert(ev.target.id);//div1
 })

3、event.relatedTarget

獲取到觸發事件的元素

$('#div1').click(function(ev){
 alert(ev.pageX + ',' + ev.pageY);//275,181
 })

3、event.relatedTarget

和event.pageY

取得到遊標相對於頁面的x的座標和y的座標

$('#div1').click(function(ev){
 alert(ev.which);//1是鼠标左键，2是鼠标中见，3是鼠标右键
})

5、event.which

該方法的作用是在滑鼠點擊事件中取得到滑鼠的左、中、右鍵；在鍵盤事件中取得鍵盤的按鍵

$('#div1').bind('click',function(){
  alert('1');
}).bind('click',function(){
  alert('2');
}).bind('mouseover',function(){
  alert('3');
})

移除事件

 unbind()方法語法： unbind([type],[data]);

　第1個參數是事件類型，第2個參數是將要

　第1個參數是事件類型，第2個參數是將要要移除的函數

　看一個例子，為div1綁定以下事件

$('#btn').bind('myclick',function(){
  alert('1');
});
$('#btn').trigger('myclick');

   1、如果沒有參數，則刪除所有綁定的事件

       $('#div1').事件

    2、如果提供了事件類型作為參數，則只刪除該類型的綁定事件

        $('#div1').unbind('mouseover');//////////ddiv1').unbind('mouseover');///moomouseover.綁定時傳遞的處理函數作為第2個參數，則只有這個特定的時間處理函數會被刪除

模擬操作

1、常用模擬

在jQuery中可以使用trigger()方法完成模擬操作，例如可以使用下面的程式碼觸發id為btn的按鈕的click事件

$('#btn').trigger('click');

2、觸發自訂事件

trigger()方法不僅能觸發瀏覽器支援的具有相同名稱的事件，也可以觸發自訂名稱的事件。

$('#btn').bind('myclick',function(event,message1,message2){
 alert(message1 + message2);
});
$('#btn').trigger('myclick',["1","2"]);

3、傳遞資料

$('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');
})

4、執行預設操作

$('input').trigger('focus');

以上程式碼會觸發input元素的focus事件，也會使元素元素本身得到焦點

如果只想觸發元素上綁定的特定事件，同時取消瀏覽器對此事件的預設操作可以使用triggerHandler()方法

其他用法

添加事件命名空間，便於管理🎜 🎜例如可以把元素綁定的多個事件類型用命名空間規範起來🎜rrreee🎜以上就是本文的全部內容，希望本文的內容對大家的學習或工作能帶來一定的幫助，同時也希望多多支持PHP中文網！ 🎜🎜更多詳解jQuery中的事件相關文章請關注PHP中文網！ 🎜