大致介紹

jQuery增加了并擴(kuò)展了基本的事件處理機(jī)制，不但提供了更加優(yōu)雅的事件處理語(yǔ)法，而且極大地增強(qiáng)了事件處理能力

jQuery中的事件

加載DOM

在jQuery中是用$(document).ready()方法來(lái)替代JavaScript中的window.onload方法的，但是他們也有一些不同點(diǎn)

1、執(zhí)行時(shí)機(jī)

例如我們有一個(gè)有很多圖片的網(wǎng)頁(yè)

$(document).ready()方法是在這個(gè)網(wǎng)頁(yè)的DOM樹(shù)加載完就可以執(zhí)行的，而window.onload方法必須在DOM樹(shù)加載完和圖片都加載完才執(zhí)行

如果使用jQuery我們想要在整個(gè)頁(yè)面加載完在執(zhí)行可以使用load()方法

下面兩段代碼的功能是一樣的

      // jQuery
      $(window).load(function(){
        // 代碼1
      });
      // JavaScript
      window.onload = function(){
        // 代碼2
      };

2、多次使用

JavaScript的onload事件一次只能保存對(duì)一個(gè)函數(shù)的引用，而$(document).ready()可以保存多個(gè)

      function one(){
        alert('1');
      }
      function two(){
        alert('2');
      }
      // JavaScript
      window.onload = one;
      window.onload = two;//只執(zhí)行two()
      // jQuery
      $(document).ready(function(){
        one();
      });
      $(document).ready(function(){
        two();
      });//one() 和 two()都會(huì)執(zhí)行

3、簡(jiǎn)寫(xiě)方式

$(document).ready(function(){});可以簡(jiǎn)寫(xiě)為$(function(){});

事件綁定

bind()函數(shù)的語(yǔ)法：bind(type,[.data],fn)

第一個(gè)參數(shù)是事件類(lèi)型

第二個(gè)參數(shù)是可選參數(shù)，作為event.data屬性值傳遞給事件對(duì)象的額外數(shù)據(jù)對(duì)象

第三個(gè)參數(shù)是用來(lái)綁定的處理函數(shù)

用例子來(lái)看，有兩個(gè)div，第二個(gè)div隱藏，當(dāng)我們點(diǎn)擊第一個(gè)div時(shí)，第二個(gè)div顯示

  <div id="div1"></div>
  <div id="div2"></div>
  <script type="text/javascript">
  $(function(){
    $('#div1').bind('click',function(){
      $(this).next().show();
    });
    
  });

增加功能，當(dāng)點(diǎn)擊div1時(shí)如果div2是顯示的，則隱藏它，否則就顯示它

  $(function(){
    $('#div1').bind('click',function(){
      if($(this).next().is(':visible')){
        $(this).next().hide();
      }else{
        $(this).next().show();
      }
    });
  });

簡(jiǎn)寫(xiě)：

    $('#div1').click(function(){
      if($(this).next().is(':visible')){
         $(this).next().hide();
       }else{
         $(this).next().show();
       }
    })

合成事件

1、hover()方法

用于模擬光標(biāo)懸停事件。當(dāng)光標(biāo)移動(dòng)到元素上時(shí)觸發(fā)第一個(gè)函數(shù)，當(dāng)光標(biāo)移出元素時(shí)，會(huì)觸發(fā)第二個(gè)函數(shù)

    $('#div1').hover(function(){
      $(this).next().show();
    },function(){
      $(this).next().hide();
    });

2、toggle()方法

用于模擬鼠標(biāo)連續(xù)單擊事件，當(dāng)鼠標(biāo)第一次點(diǎn)擊元素，觸發(fā)第一個(gè)函數(shù)，當(dāng)鼠標(biāo)點(diǎn)擊同一個(gè)函數(shù)時(shí)觸發(fā)第二個(gè)函數(shù)

$('#div1').toggle(function(){
  $(this).next().show();
},function(){
  $(this).next().hide();
}); 

阻止事件冒泡和阻止默認(rèn)行為

1、阻止事件冒泡 

stopPropagation()方法

2、阻止默認(rèn)行為

preventDefault()方法

注意：1、return false 在jQuery中是即阻止事件冒泡又阻止默認(rèn)行為

　　　2、jQuery不支持事件捕獲

事件對(duì)象的屬性

1、event.type

　　　改方法的作用是獲取到事件的類(lèi)型

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

2、event.target

獲取到觸發(fā)事件的元素

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

3、event.relatedTarget

獲取相關(guān)元素

4、event.pageX和event.pageY

獲取到光標(biāo)相對(duì)于頁(yè)面的x的坐標(biāo)和y的坐標(biāo)

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

5、event.which

該方法的作用是在鼠標(biāo)單擊事件中獲取到鼠標(biāo)的左、中、右鍵；在鍵盤(pán)事件中獲取鍵盤(pán)的按鍵

$('#div1').click(function(ev){
 alert(ev.which);//1是鼠標(biāo)左鍵，2是鼠標(biāo)中見(jiàn)，3是鼠標(biāo)右鍵
})

移除事件

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

　第1個(gè)參數(shù)是事件類(lèi)型，第2個(gè)參數(shù)是將要移除的函數(shù)

　看一個(gè)例子，為div1綁定如下事件

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

   1、如果沒(méi)有參數(shù)，則刪除所有綁定的事件

       $('#div1').unbind();//刪除所有事件

    2、如果提供了事件類(lèi)型作為參數(shù)，則只刪除該類(lèi)型的綁定事件

        $('#div1').unbind('mouseover');//刪除mouseover事件

    3、如果把綁定時(shí)傳遞的處理函數(shù)作為第2個(gè)參數(shù)，則只有這個(gè)特定的時(shí)間處理函數(shù)會(huì)被刪除

模擬操作

1、常用模擬

在jQuery中可以使用trigger()方法完成模擬操作，例如可以使用下面的代碼來(lái)觸發(fā)id為btn的按鈕的click事件

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

2、觸發(fā)自定義事件

trigger()方法不僅能觸發(fā)瀏覽器支持的具有相同名稱(chēng)的事件，也可以觸發(fā)自定義名稱(chēng)的事件。

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

3、傳遞數(shù)據(jù)

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

4、執(zhí)行默認(rèn)操作

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

以上代碼會(huì)觸發(fā)input元素的focus事件，也會(huì)使<input>元素本身得到焦點(diǎn)

如果只想觸發(fā)<input>元素上綁定的特定事件，同時(shí)取消瀏覽器對(duì)此事件的默認(rèn)操作可以使用triggerHandler()方法

其他用法

添加事件命名空間，便于管理

例如可以把元素綁定的多個(gè)事件類(lèi)型用命名空間規(guī)范起來(lái)

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

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論