JQ總務處｜jQuery事件與函式｜深入淺出jQuery

前言

拖了好久終於願意把它寫出來了，這次準備好把事件、函式跟條件邏輯加進去你的技能表裡了嗎？那就準備開始練功打怪了吧！

（ 圖片來源 ）

讓頁面發生事件

在 jQuery 和 JavaScript 裡有許多事件（ 點擊為其一 ），事件是讓你在頁面上發生某事時可執行一段程式碼的機制（ 像是使用者點擊按鈕 ），被執行的程式碼是函式，讓你的 jQuery 更有效率且可重複利用。

事件偵聽器（ event listener ）

事件偵聽器是文物件（ DOM ）的一部分，你可以把它加到任何頁面，而不必倚賴使用著點擊連結或按鈕就能讓事件發生，它是瀏覽器監看使用者在頁面上做什麼的機制，並且告訴 JavaScript 直譯器是否需要做什麼事來回應。

繫結事件

當我們為元素添加事件時，我們稱之為把事件繫結（ bind ）到元素，下面提供兩個方法把事件與元素繫結起來：

方法一

在頁面被載入時將事件添加到元素，通常被稱作便捷方式。

$("#myElement").click(function(){
    alert($(this).text());
})

方法二

在載入頁面後才被增加到頁面上的元素添加事件，就像建立新的 DOM 元素那樣。

$("#myElement").bind('click',function(){
    alert($(this).text());
})

方法一只是方法二的快速捷徑，但只能用於 DOM 元素已經存在時， jQuery 提供很多像前者這樣的捷徑，但如果你想將新的可點擊圖像新增到清單中並可與使用者互動，那就必須使用後者為程式碼建立新的增加事件。

觸發事件

事件能夠被任何頁面上的各種事物所引發，例如：

瀏覽器事件

• error
• resize
• scroll

鍵盤事件

• keydown
• keypress
• keyup

表單事件

• blur
• change
• focus
• select
• submit

滑鼠事件

• click
• dblclick
• focusin
• focusout
• hover
• mousedown
• mouseenter
• mouseleave
• mousemove
• mouseout
• mouseover
• mouseup
• toggle

文件載入事件

• load
• ready
• unload

想知道更多不同類型的事件可以在 jquery.com 網站上尋找。

移除事件

既然有繫結一定就也要有移除啊，當我們把該事件從元素上拿走後即不會被觸發， unbind 會告訴瀏覽器不要再為這個元素偵聽特定事件。

移除一個事件

// 增加點擊（ click ）事件偵聽器到 ID 為 myElement 的元素
$("#myElement").bind('click',function(){
    alert($(this).text());
})

// 從 myElement 移除該點擊事件
$("#myElement").unbind('click');

移除全部事件

// 增加焦點（ focus ）事件偵聽器到 ID 為 myElement 的元素
$("#myElement").bind('focus',function(){
    alert("I've got focus!");
})

// 增加點擊（ click ）事件偵聽器到 ID 為 myElement 的元素
$("#myElement").click(function(){
    alert("You clicked me.");
})

// 告訴瀏覽器不再為 myElement 偵聽事件
$("#myElement").unbind();

遍歷每個元素

each 提供以迴圈繞行（ looping ），也稱作迭代（ iteration ），就是遍歷（ go through ）一組元素，一次一個，並且在過程中依序對每個元素做某事。

$(".nav_item").each(function(){
    $(this).hide();
})

建立函式

要建立函式時，必須使用一致的語法，將函式名稱與他所執行的程式碼繫結起來，下面是最基本的 JavaScript 函式語法：

1. 從 function 關鍵字開始。
2. 給函式一個名稱。
3. 圓括號是指明這是函式的明顯特徵。
4. 以左右大括號展開與完成函式。
5. 放置你程式碼的地方。

為函式命名

為函式命名才能讓你從程式碼裡的多個地方呼叫它。

函式宣告

函式宣告（ function declaration ）定義具名的函式變數（ function variable ），而不需要做變數指派（ variable assignment ）。

function function_name() {
    $("div").hide();
}

函式表達式

函式表達式（ function expression ）將函式定義成較大的表達式語法（ 通常是變數指派 ）的一部分。

var function_name = function() {
    $("div").hide();
}

函式命名的限制

1. 開頭不能為數字。
2. 不能使用任何數學運算子。
3. 不能使用下底線（ _ ）以外的標點符號。
4. 不能有空格。
5. 有區分大小寫。

匿名函式 vs 具名函式

主要差別在時間點，雖然做的事情相同，但以「具名函式表達式」來宣告的函式一直到它被遇到以及定義之「後」，才能被使用，另一方面，有「函式宣告」的才能夠在頁面上的任何地方隨時進行呼叫，甚至是在 onload 處理器。

function 會被完整記憶； var 只會創造空間然後要等執行才知道。

匿名函式

匿名函式在程式碼遇到它們時立即被呼叫，此外，任何在那些函式內部宣告的變數也只有在該函式正在執行時有效，然後因為沒有給這個函式命名，所以我們無法從程式碼裡的其他地方呼叫它。

$(document).ready(function(){
    $(".myEle").click(function(){
        ...
    })
})

具名函式

在使用自定義的具名函式作為這些處理器時，能直接從我們的程式碼裡呼叫它們。

函式宣告

宣告完後就可以從我們的程式碼中呼叫它，只需要寫上函式名稱加上小括號即可。

function function_name() {
    $("div").hide();
}

function_name(); //呼叫函式

函式表達式

當函式作為處理器函式來使用時，名稱後面就不需要加上小括號。

var function_name = function() {
    $("div").hide();
}

$("#myelement").click(function_name); //當點擊myelement後才會執行function_name

傳遞變數（ 參數 ）給函式

當變數被增加（ 或傳遞 ）到函式時，它們被稱為引數（ 或參數 ）。

function welcome(name) {
    alert("Hello" + name);
}

// 呼叫函式
welcome("John");

該函式不需要知道變數裡包含什麼，它只是將目前被存放在裡頭的任何東西顯示出來，所以僅透過改變變數就能改變展示結果，過程中完全不需要改變函式內容，可以把它想像成是一個雞尾酒調製法，你擁有調製雞尾酒的重複步驟：加一小杯這個、再加一小杯那個，最後攪一攪、搖一搖、晃一晃，而當中的成分就是你傳遞進去的變數。

函式也能回傳值

從函式回傳資訊牽涉到使用 return 關鍵字，後面接著要回傳的資訊，這樣運算結果就可以被回傳給呼叫該函式的程式碼，因此我們能夠在其餘部分的程式碼裡使用它。

回傳型別可以是數字、文字字串，或 DOM 元素（ 物件 ）。

function multiply(num1,num2) {
  var result = num1*num2; //利用引數做某事
  return result; //回傳值
}

// 呼叫函式
var total = multiply(6,7);
alert(total);

我們必須為所有的函式指定回傳值嗎？

技術上來說不用，無論你是否指定，所有的函式皆會回傳值，如果沒告訴函式要回傳什麼，那它將回傳一個 undefined 的值，此時如果程式碼不能處理這個值時就會引發錯誤，因此指定回傳值是個好想法，即使是 return result 也可以。

使用條件邏輯做決策

藉由條件邏輯就能夠根據你的程式碼所做的決策來執行不通的程式碼，從 if 關鍵字開始，小括號裡放我們要檢查的東西，而結尾的 else 陳述式並非必要。

if (myBool == true){
  檢查結果為真時所要執行的程式碼
}else {
  檢查結果為假時所要執行的程式碼
}

$.contains

這是 jQuery 程式庫裡能接受兩個參數的靜態方法（ 即不需要選擇器就能夠呼叫 ），它檢查第一個參數的所有子元素，看看是否包含第二個參數，並且回傳 ture 或 false 。

$.contains(document.body, document.getElementById("header"))

停駐事件

停駐（ hover ）事件可以接受兩個處理器函式作為參數：一個針對 mouseenter （ 滑鼠進入 ）事件；另一個針對 mouseleave （ 滑鼠離開 ）事件。

$("myElement").hover(
    function (){
        //mouseenter event handler
        alert("滑鼠進入");
    },
    function (){
        //mouseleave event handler
        alert("滑鼠離開");
    },
);

參考資料

深入淺出 jQuery （ Ryan Benedetti, Ronan Cranley 著、楊仁和 譯 ）