jQuery的事件綁定與觸發 - 學習筆記

• jQuery的事件綁定與觸發
  • 事件綁定
  • 自動觸發事件
  • 常用的鼠標事件
  • 事件冒泡和默認行爲
    • 事件冒泡
    • 默認行爲
  • 獲得當前鼠標的位置和按鍵

jQuery的事件綁定與觸發

事件綁定

• 基本綁定

  $(element).click(function(){})

• 方法綁定

$(element).bind('click', function(){})//綁定事件

$(element).unbind();//解除事件綁定

• 動態綁定

live.on方法在高版本的jquery中移出了,在使用時請注意版本

$(element).live('click', function(){})

可以使用on()方法,添加selector參數，進行動態綁定

$(element).on('click','selector', function() {});

自動觸發事件

當我們想要去觸發某個元素的事件時可以使用 trigger(),注意需指定元素的事件類型

$(element).trigger('click')

常用的鼠標事件

鼠標單擊事件 click

鼠標雙擊事件 dbclick

鼠標移入事件 mouseover

鼠標移出事件 mouseout

鼠標按下事件 mousedown

鼠標擡起事件 mouseup

鼠標移動事件 mousemove

事件冒泡和默認行爲

事件冒泡

當觸發一個元素的事件時,會自動觸發該元素的父級和先輩級的同類型事件,造成事件併發,導致頁面混亂,稱爲事件冒泡

此時我們可以在元素的事件處理函數中 返回一個false 來進行阻止,注意這個方法僅限於在jQuery中使用

默認行爲

在頁面中有些元素是具備默認行爲的,例如a鏈接的單擊,表單的提交,都會進行跳轉或提交,這些我們成爲默認行爲

但是在綁定上事件後,它首先會先執行事件,再去執行默認行爲,而有時我們只想讓其觸發事件,但不執行默認行爲時,

我們可以在該元素的事件中 返回一個false來進行阻止默認行爲

<a href="http://www.Google.com">谷歌</a>
<script>
    $('a').click(function(){
        return false;
    })
<script>

獲得當前鼠標的位置和按鍵

我們有鼠標和鍵盤按鍵的事件,在觸發事件時如果我們想要獲取按鍵信息時,

首先需要在當前的事件中傳遞一個 事件對象 event

$(element).click(function(e){//傳入參數非固定，可自定義，默認第一個爲event對象

    //能夠獲取>鼠標的x軸和y軸座標,座標位置相對於瀏覽器窗口
    var x = e.clientX;
    var y = e.clientY;

    //能夠獲取>鼠標的x軸和y軸座標,座標位置相對於文檔
    var _x = e.pageX;
    var _y = e.pageY;
})

$(element).keydown(function(e){
    //可以打印e對象,或者直接使用該對象中的keyCode屬性來獲取按鍵信息
    var key = e.keyCode;
    console.log(key);
})