jQuery-事件處理

Posted on April 16, 2019 本文总阅读量次

事件處理函式

語法結構

1
2
3

$('選擇器').on('事件類型', function(){
    任意處理程序
})

$()函式的功能是將HTML元素轉換為jQuery特殊元素，經此方法轉換後的HTML元素稱為「jQuery物件」
on()是設定「當某事件發生時，執行某指令」的方法。
- 第一個參數是「事件類型(Event Type)」：事件觸發的條件
- 第二個參數是「處理程序(Event Handler)」：事件被觸發後，接著要调用的方法。

語法執行概念

先利用$()函式，將作為指令對象的HTML元素，轉換為jQuery物件
針對jQuery物件呼叫on()方法
在on()方法中傳入兩個參數，定義要被觸發的「事件類型」以及接下來要執行的「處理程序」

簡易範例

當滑鼠移入#typo，接著會執行：透過css樣式修改#typo的顏色

$function(){
    $('#typo').on('mouseover',function(){
        $('#typo').css('color','#ebc000')
    })
}

多個處理程序

在.on()方法中的第一個參數「事件類型」被觸發之後，第二個參數「處理程序函式」中可以執行數個個別處理的程序

語法結構

$('選擇器').on('事件類型', function(){
    處理1;
    處理2;
    處理3...;
})

簡易範例

當滑鼠移入#typo，接著會執行：

透過css樣式修改#typo的顏色

透過css樣式修改header的背景顏色

$function(){
    $('#typo').on('mouseover',function(){
        $('#typo').css('color','#ebc000') ;
        $('header').css('background-color','#ffffff')
    })
}

設定多個事件類型

一個jQuery物件，可以有多個.on()方法，例如：當A事件(滑鼠移入)時要執行a程序，而當B事件(滑鼠移出)時要執行b程序

方法鏈串語法

多個方法如鎖鏈一般串連起來，針對$()產生的同一個jQuery物件作為執行對象，程式會從左到右開始執行。

1	$('選擇器').事件A().事件B().事件C()....

簡易案例

當滑鼠移入#typo元素時，會改變文字即背景顏色
當滑鼠移出#typo元素時，會回復為原本的顏色

多個事件一般寫法(效能差)

針對同一個物件，寫兩次$()函式，瀏覽器花時間分析HTML並取得目標元素，會造成CPU負擔

$(function(){
    $('#typo').on('mouseover',function(){
        $('#typo').css({
            color:'#ebc000',
            backgroundColor:'#ae5e96'
        });
    });
    $('#typo').on('mouseout',function(){
        $('#typo').css({
            color:'',
            backgroundColor:''
        });
    });
})

修改為鏈串寫法(效能佳)

只需要使用一次$()函式，除了簡化程式碼，也提稱程式處理速度

$(function(){
    $('#typo')
        .on('mouseover',function(){
            $('#typo').css({
                color:'#ebc000',
                backgroundColor:'#ae5e96'
            })
        })
        .on('mouseout',function(){
            $('#typo').css({
                color:'',
                backgroundColor:''
            })
        })
})

主要的事件類型

jQuery中，大部分的操作都基於HTML DOM，所以必須確定頁面文件已經完全下載好，才能開始執行程式。jQuery 提供下面這個函式來處理 DOM ready事件

當DOM載入後，執行ready()方法。

1
2
3

$(document).ready(function() {
    // 這裡放你要執行的程式碼
});

也可以這樣寫

1
2
3

$function(){
    // 這裡放你要執行的程式碼
}