Ting's Square 程式寫作之路

[Day18] JS: javascript 事件

Total : 818 words.

javascript event 事件
透過event,我們得以實現更多互動性的功能:一偵測到使用者的某個行為(eg. 點擊連結),網頁就做出某個反應(eg. 跳出視窗)。


目錄:


Q. 什麼時候會有事件發生? A. 滑鼠移動
點擊某個連結/按鈕
捲動滾輪
etc…

描述事件的方式

1. 直接把事件加在元素的標籤裡面

Eg. onclick方法

<body>
    <a href="#" onclick="alert('hi');">按我!</a>
</body>

也可以寫成javascript的function

<body>
    <a href="#" onclick="clickme();">先按我!</a>
</body> 
<script>
    function clickme() {
      console.log('我被按了!');
    } 
</script>

Eg. onmouseover

2. 把事件寫在Event Listener

Step 1. 元素id取名

html

  <a href="#" id="clicker">Event Listener</a>

Step 2. 用DOM的概念將元素抓出來

javascript

var clicker = document.querySelector('#clicker');

Step 3. callback function 回呼函式

  1. 讓元素使用.addEventListener設定DOM想要監聽的事件為click

  2. 只要事件發生了,就去觸發後的函式

javascript

clicker.addEventListener("click", function(){
  console.log('我被按了QQ');
});

console

我被按了QQ

注意! javascript重視引入的時序,所以使用Listener時,將要引入的script片段<script></script>放於底部

html

  <a href="#" id="clicker">Event Listener</a>
  <script src="script/script.js"></script> 

3. 省略Event Listener的方法

var clicker = document.querySelector('#clicker');

clicker.addEventListener("clicker", function(){
  console.log('我被按了QQ');
});

以上的javascript可改寫為省略Event Listener的方法:

var clicker = document.querySelector('#clicker');

clicker.onclick = function() {
  console.log('我被按了YY');
}

4. Event Listener 傳參數

eg. 預設的送出表單submit,在實務上常常會先用.preventDefault();關掉原本的預設行為, 目的是為了在送出表單前寫驗證的function,檢查表單上的欄位。

var clicker = document.querySelector('#clicker');

clicker.addEventListener("clicker", function(evt){
  evt.preventDefault();
  console.log('我被按了QQ');
});

5. 省略Event Listener的傳參數寫法

var clicker = document.querySelector('#clicker');

clicker.onclick = function(evt){
  evt.preventDefault();
  console.log('我被按了YY');
};

Unobtrusive JavaScript(UJS) 非侵入式Javascript

Callback Function: 把function當作參數傳遞

eg. 以下程式把sayHello指定給.onlick或放在.addEventListener裡面

  • 注意:這裡的sayHello後面沒有小括號,因為沒有馬上被呼叫
  • 只有符合條件才會被呼叫
  • 如果加了小括號,就會立刻被呼叫

javascript

var zone = document.querySelector('#zone');
/* 第一種寫法 */
zone.onclick = sayHello;

/* 第二種寫法 */
zone.addEventListener("click", sayHello);

function sayHello() {
  console.log('Hello');
}

改寫上一章節的程式碼,將事件寫為UJS

Step 1. 把HTML裡的onlick=function都刪掉

html

<a href="#" class="addProduct" onclick="addProduct(-1)">-</a>
<a href="#" class="addProduct" onclick="addProduct(1)">+</a>
<a href="#" class="selectAll" onclick="selectAllSkills()">我全都要</a>

改為

<a href="#" class="addProduct" id="minusItem">-</a>
<a href="#" class="addProduct" id="addItem">+</a>
<a href="#" class="selectAll">我全都要</a>

如果class名稱相同,就取id名字區別功能。

Step 2. 用DOM抓取class (或id)

  • 方法一: 加上.addeventlistener
document.querySelector('.selectAll').addEventListener("click", function(evt){
  evt.preventDefault();
  selectAllSkills();
});

p.s. 若.preventDefault()省略不寫也不影響功能的情況,可改寫為:

document.querySelector('.selectAll').addEventListener("click", selectAllSkills);

注意:selectAllskills不含小括弧。

  • 方法二: 或者是寫成.onlick
document.querySelector('#minusItem').onclick = function(evt){
  evt.preventDefault();
  addProduct(-1);
};

document.querySelector('#addItem').onclick = function(evt){
  evt.preventDefault();
  addProduct(1);
};

改寫後可以讓HTML頁面的javascript語法移至script檔,讓程式碼更容易維護。

相關連結

HackMD筆記