jquer基礎事件方法實例分析

這篇文章主要介紹“jquer基礎事件方法實例分析”，在日常操作中，相信很多人在jquer基礎事件方法實例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”jquer基礎事件方法實例分析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

基礎事件方法：1、click()，設置鼠標單擊事件；2、dblclick()，設置鼠標雙擊事件；3、change()，設置內容改變事件；4、focus()，設置觸發焦點事件；5、blur()，設置失去焦點事件；6、mousedown()等。

本教程操作環境：windows7系統、jquery1.10.2版本、Dell G3電腦。

事件方法觸發器或添加一個函數到被選元素的事件處理程序。

下面的表格列出了一些用于處理事件的 jQuery 方法。

說明：

1、以上事件函數有三種用法：

//直接綁定事件到元素上
$('.target1').keydown(function(e) {
    $("em:first").text(e.target.value)    //通過對象e獲取輸入的值
});
 
//傳遞參數調用函數處理
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 通過e傳遞參數數據
});
 
//手動觸發已綁定的點擊事件
$elem.click()

2、mouseover與mouseenter區別：不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件，稱作支持冒泡處理，冒泡處理指子元素與父元素共同定義的事件，在觸發子元素時，或者沒有定義子元素，事件就會向父級傳播，引發父級事件觸發。只有在鼠標指針穿過被選元素時，才會觸發 mouseenter 事件。

3、form元素是有默認提交表單的行為，如果通過submit處理的話，需要禁止瀏覽器的這個默認行為。傳統的方式是調用事件對象  e.preventDefault() 來處理， jQuery中可以直接在函數中最后結尾return false即可。

    //回車鍵或者點擊提交表單后禁止瀏覽器默認跳轉：
    $('#target2').submit(function() {
        alert('捕獲提交表達動作,阻止頁面跳轉')
        return false;
    });

4、on()使用

基本用法：.on( events ,[ selector ] ,[ data ] )

最常見的給元素綁定一個點擊事件，對比一下快捷方式與on方式的不同

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

//多個事件綁定同一個函數，通過空格分離，傳遞不同的事件名，可以同時綁定多個事件
$("#elem").on("mouseover mouseout",function(){ });

//多個事件綁定不同函數
$("#elem").on({
    mouseover:function(){}, 
    mouseout:function(){}
});

//將數據傳遞到處理程序
$( "button" ).on( "click", {    //第二個參數傳遞數據給函數調用
  name: "Mr.Tory"
}, greet );
function greet( event ) {
  alert( "Hello " + event.data.name ); //輸出Hello Mr.Tory
}

事件對象的屬性與方法

$("#content").click(function(event) {
   $("#msg").html("<p>外層div元素被單擊</p>");
   event.stopPropagation();                         //通過event方法阻止事件冒泡  
});

到此，關于“jquer基礎事件方法實例分析”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！