jquer基礎(chǔ)事件方法實(shí)例分析

這篇文章主要介紹“jquer基礎(chǔ)事件方法實(shí)例分析”，在日常操作中，相信很多人在jquer基礎(chǔ)事件方法實(shí)例分析問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”jquer基礎(chǔ)事件方法實(shí)例分析”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

基礎(chǔ)事件方法：1、click()，設(shè)置鼠標(biāo)單擊事件；2、dblclick()，設(shè)置鼠標(biāo)雙擊事件；3、change()，設(shè)置內(nèi)容改變事件；4、focus()，設(shè)置觸發(fā)焦點(diǎn)事件；5、blur()，設(shè)置失去焦點(diǎn)事件；6、mousedown()等。

本教程操作環(huán)境：windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。

事件方法觸發(fā)器或添加一個(gè)函數(shù)到被選元素的事件處理程序。

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

說(shuō)明：

1、以上事件函數(shù)有三種用法：

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

2、mouseover與mouseenter區(qū)別：不論鼠標(biāo)指針穿過(guò)被選元素或其子元素，都會(huì)觸發(fā) mouseover 事件，稱(chēng)作支持冒泡處理，冒泡處理指子元素與父元素共同定義的事件，在觸發(fā)子元素時(shí)，或者沒(méi)有定義子元素，事件就會(huì)向父級(jí)傳播，引發(fā)父級(jí)事件觸發(fā)。只有在鼠標(biāo)指針穿過(guò)被選元素時(shí)，才會(huì)觸發(fā) mouseenter 事件。

3、form元素是有默認(rèn)提交表單的行為，如果通過(guò)submit處理的話(huà)，需要禁止瀏覽器的這個(gè)默認(rèn)行為。傳統(tǒng)的方式是調(diào)用事件對(duì)象  e.preventDefault() 來(lái)處理， jQuery中可以直接在函數(shù)中最后結(jié)尾return false即可。

    //回車(chē)鍵或者點(diǎn)擊提交表單后禁止瀏覽器默認(rèn)跳轉(zhuǎn)：
    $('#target2').submit(function() {
        alert('捕獲提交表達(dá)動(dòng)作,阻止頁(yè)面跳轉(zhuǎn)')
        return false;
    });

4、on()使用

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

最常見(jiàn)的給元素綁定一個(gè)點(diǎn)擊事件，對(duì)比一下快捷方式與on方式的不同

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

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

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

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

事件對(duì)象的屬性與方法

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

到此，關(guān)于“jquer基礎(chǔ)事件方法實(shí)例分析”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！