JavaScript－event介紹(下)

-
JavaScript－event介紹(中) ，我們介紹了阻擋預設行為（event.preventDefault）、阻擋事件冒泡（event.stopPropagation）、event.target、事件指派（event delegate) 

 這篇主要針對常用事件來做介紹  
來源：整理自Kuro大大文章 那些你知道與不知道的事件們
網頁上常用事件整理 
1.load事件：
註冊在 window 物件上，指的是網頁資源 (包括CSS、JS、圖片等) 全數載入完畢後觸發。
2.unload、beforeunload事件：
unload 與 beforeunload 事件分別會在離開頁面或重新整理時觸發，而 beforeunload 會跳出對話框詢問使用者是否要離開目前頁面。
3.error事件：
error 事件會在 document 或是圖片載入錯誤時觸發。
很適合用在網頁上圖片不存在時，觸發寫法如下
<img src="image.jpg" onerror="this.src='default.jpg'">
像這樣，當 image.jpg 這個圖檔不存在的時候，馬上就會觸發 error 事件。此時就會透過 this.src 將 <img> 的 src 屬性替換成指定的預設圖檔，是相當實用的技巧。
4.resize、scroll事件
5.DomContentLoaded事件：
類似load事件，差異在於DomContentLoaded事件是在Dom元素結構被完整讀取跟解析後就會被觸發。如下圖（引用自Kuro系列文章）
  • 鍵盤相關事件
1.keycode 使用 範例
var body = document.body;
//console.dir(document)
function goRocket(e){
    //查詢按鈕是按到哪個鍵盤
    console.log(e.keyCode);
    switch(e.keyCode){
        case 97:
            document.querySelector('.rocket-1').style.bottom = '2000px'
            break;
        case 98:
            document.querySelector('.rocket-2').style.bottom = '2000px'
            break;
        case 99: 
            document.querySelector('.rocket-3').style.bottom = '2000px'
           break;
    }
}

// 監聽事件
body.addEventListener('keydown',goRocket,false)
說明：
1.css 中html要先設成高度100% ，因為內部元件都是用絕對定位，無法將 html 撐開
所以先下好 height 100%，可以將整個版面拉高到瀏覽器的高度
2. 兩者相同意思  連結  MDN補充說明
document.querySelector('.rocket-1').style.bottom = '2000px'
document.querySelector(".rocket-3").setAttribute("style","bottom:1000px");
3.switch使用目的在於基於不同條件執行不同動作  文章 
補充：
2.getComputedStyle() 方法說明   目的：獲取指定元素的CSS 樣式
3.cubic-bezier 動畫效果遊戲       連結

2.keydown 事件: 
「壓下」鍵盤按鍵時會觸發 keydown 事件。
3.keypress 事件（不推薦使用，原因是主流規範已經漸漸將此事件移除）
除了 Shift, Fn, CapsLock 這三種按鍵外按住時會觸發，若按著不放則會連續觸發。
4.keyup 事件: 
「放開」鍵盤按鍵時觸發。

  • 表單相關事件
1.change網頁內容時觸發 範例 
var area = document.getElementById("areaId");
var list = document.querySelector(".list");

var country = [
  {
    farmer: "賈斯柏",
    location: "鶯歌區"
  },

  {
    farmer: "偉杰",
    location: "土城區"
  },

  {
    farmer: "又宜",
    location: "三峽區"
  }

];


// 監聽
area.addEventListener('change', updatelist, false);
list.addEventListener('click',toggleDone,false);

function updatelist(e) {
    //   確認選到哪一個內容
    var select = e.target.value;
    //  組字串
    var str = '';
    // 陣列長度記得放入函式內，因為刪除更新資料時，陣列長度必須也更新
    var countryLen = country.length;
    for (var i = 0; i < countryLen; i++) {
        if (select == country[i].location) {
str += '<li><a href="#" data-num="' + i + '">刪除</a>'+ country[i].farmer + '</li>'            console.log(str);
        }
    }
    list.innerHTML = str;

}

// 刪除
function toggleDone(e){
    e.preventDefault();
    if(e.target.nodeName=="A"){
        // 挑選出dataset-num
        var num = e.target.dataset.num;
        country.splice(num,1);
        updatelist(e);
    }
}
說明：
' ' 所代表的是字串內容，包住 <li> 是因為 li 標籤要以字串呈現，中間 + 上的 country[i].farmer 是動態的內容，所以不需要用 ' '
延伸閱讀：

2.blur事件  範例
// 綁定Dom元素

var burgerNum = document.querySelector(".burgerNum");
var cokeNum = document.querySelector(".cokeNum");
var count = document.querySelector(".count");
var total = document.querySelector('.total');



// 確認是否為空值和負值

function checkContent(e) {
  var str = e.target.value;
  var strNum =parseInt(str);
  if (str == "" || strNum<0) {
    alert("請填入正確數量");
  }

}

function countItem() {

  var burger_Num = burgerNum.value;
  var coke_Num = cokeNum.value;
  var burgerPrice = 50;
  var cokePrice = 20;
  if (burger_Num ==""  || coke_Num =="") {
    alert("請填入正確數量");
  } else {
    coke_Num = parseInt(cokeNum.value); // 要轉數字
    burger_Num = parseInt(burgerNum.value); // 要轉數字
    document.querySelector(".total").textContent = burger_Num * burgerPrice + coke_Num * cokePrice;
  }
  // console.log(cokePrice);
}


// 監聽事件
burgerNum.addEventListener("blur", checkContent);
cokeNum.addEventListener("blur", checkContent);
count.addEventListener("click", countItem);
補充：replace限制文字框只能輸入數字，數字和字母等的正規表示式 文章連結

3.input 事件 練習連結
當 input、 textarea 以及帶有 contenteditable 的元素內容被改變時，就會觸發 input 事件。
input 事件會在輸入框輸入內容的當下觸發

4.submit 事件
當表單被送出時觸發，通常表單驗證都會在這一步處理，若驗證未通過則 return false。

  • 滑鼠事件
1.mouseover用法  範例
queryselector回傳的是陣列，所以若要監聽多個元素必須用for迴圈
var el = document.querySelectorAll(".box");

console.log(Array.isArray(el)) //判斷是否為陣列寫法
var len=el.length;
for(var i=0;i<len;i++){
el[i].addEventListener('mouseover',function(e){
alert('你碰到了!')
},false)
}
Tips：搭配animate用法 讓畫面看起來更豐富 animate用法介紹
補充：實作時發生 “.addEventListener is not a function” why does this error occur?  文章
說明：主要原因為我選取的是多個元素，若沒有用for迴圈跑陣列，變數el就只是一個空陣列，故會回傳錯誤訊息

2.透過mouseover獲取網頁座標(screen、page、client)介紹 範例
// 取得class
var screenX = document.querySelector(".screenX");
var screenY = document.querySelector(".screenY");
var pageX = document.querySelector(".pageX");
var pageY = document.querySelector(".pageY");
var clientX = document.querySelector(".clientX");
var clientY = document.querySelector(".clientY");

// getPosition函數，利用textContent帶入文字
function getPosition(e) {
screenX.textContent = e.screenX;
screenY.textContent = e.screenY;
pageX.textContent = e.pageX;
pageY.textContent = e.pageY;
clientX.textContent = e.clientX;
clientY.textContent = e.clientY;
}

// 對整個網頁監聽
var el = document.body;
el.addEventListener("mousemove", getPosition, false);
說明：
1. screen   指螢幕的解析度的座標點
2. page     指整個網頁寬高為主(所以若在html中設定超過瀏覽器窗口高度，就會凸顯跟client座標差異)
3. client     指瀏覽器窗口

延伸閱讀：應用篇
//控制圖片顯示位置
mouseImg.style.left=e.clientX+50+"px";
mouseImg.style.top=e.clientY+50+"px";
說明：
e.clientX+'px'
1.這邊px是"單位"，不能省略。原因是因為跟css必須套用px，而這邊也是一樣的意思
2.+50+ 這邊是創造游標和圖案之間的空隙

3.mousedown / mouseup 事件: 
這兩個事件分別會在滑鼠點擊了某元素「按下」(mousedown) 按鈕，以及「放開」(mouseup) 按鈕時觸發。

  • 特殊事件
1.Composition Event (組成事件)
Composition Event 其實指的是 compositionstart 、 compositionend ，以及 compositionupdate 這三個事件。
目的：用來偵測使用者輸入文字時變化，可以提供類似自動提示功能給使用者。 範例

留言

張貼留言