javascript 事件
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 回呼函式
-
讓元素使用
.addEventListener設定DOM想要監聽的事件為click -
只要事件發生了，就去觸發後的函式
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檔，讓程式碼更容易維護。