箭頭函式是JavaScript的一種特別的函式寫法，用來簡化一般函式(function)。

//一般函式
function() {
	...
};

//箭頭函式
() => {
	...
};

參考以上比較的寫法，箭頭函式省略了對函式名稱的命名，減少過多臨時性函式，還得為他命名的麻煩，並且在有回傳值(return)時，可再進一步簡化語法。

//函式有回傳值
//一般函式
function (a, b) {
	return a + b;
};

//箭頭函式
(a, b) => a + b;

但因為上述的語法，有其適用限制，即只能回傳一個表達式，並且過度省略的結果，在程式解讀上反而沒有多大助益，故還是習慣在有回傳值時，維持不省略return的寫法，並且保留中括號，也可方便一目了然知道該函式的內容範圍，如下

//箭頭函式，建議維持保留return的寫法
(a, b) => {
	return a + b;
};

在取得回傳值後，傳統函式儲存回傳值的方式，一樣可以用於箭頭函式，以 “=” 運算子進行存成變數，如下

//函式有回傳值
//一般函式
const add = function(a, b) {
	return a + b;
};

const add_result = add(1, 2);

//箭頭函式
const add2 = (a, b) => {
	return a + b;
};

const add_result2 = add2(1, 2);

而注意的是，一般函式，可以在定義函式時，先予命名，後續要使用時，再以該名稱進行呼叫，並將回傳值存入變數，這種寫法是箭頭函式所沒有的。

//函式有回傳值
//一般函式(可以命名函式)
function add3(a, b) { //先予命名函式
	return a + b;
};

const add_result3 = add3(1, 2); //要呼叫時，直接以該名稱進行呼叫

在了解箭頭函式的語法後，再回頭看監聽事件的箭頭函式，就會變得相當明瞭，即當監聽到滑鼠點擊事件，直接定義並呼叫函式，省略命名，避免過多暫時性，只此一用的函式名稱充斥整個程式碼，影響閱讀，在無需回傳值的情況下，整個程式變得相當簡潔，且可讀性高。