[day-10]Event 事件 - 讓您的網頁具有互動效果

medium版本

event

event就是事件的意思 在網頁上會很多的事件
舉例來講 滑鼠滑到某個區塊點擊 就是觸發點擊事件
或是像滑鼠滾輪滾動到某個位置 也是發生事件
也可以到w3school去看有哪些事件
w3school event事件清單

接下來就會教你該如何在DOM上面去註冊事件
當你註冊事件以後的話 就可以對他進行很多不同的操作

addEventListener 註冊事件監聽教學

首要步驟就是先用document.querySelector選擇到dom的節點
可以用const先宣告一個變數去存取該節點
在用變數.addEventListener("事件",function(e){})
來去新增該節點進行事件後要執行的動作

HTML

input type="button" value="點擊" class="btn">
<h1>標題</h1>

all.JS

const btn = document.querySelector(".btn"); //先用前面DOM章節學習到的讀取節點 找到按鈕
const title = document.querySelector("h1");

//監聽 事件
btn.addEcentListener("click",function(e){ //在節點觸發點擊的事件 會觸發function(e)
    console.log("你被點擊了"); //執行事件
})

如何觀看 DOM 有註冊事件監聽

那這邊教一下如何在瀏覽器去確定自己的監聽事件有沒有完成
可以右鍵點檢查 點下選取網頁中的元素檢查
然後點選要檢查的元素 下方就有一個Event Listeners(事件監聽器)
裡面就可以看到你寫的JS監聽事件了

來寫一個加法器吧！

HTML

<input type="button" value="點擊" class="btn">
<h1>0</h1>
<script src="all.js"></script>

all.JS

const btn = document.querySelector(".btn"); //找到按鈕節點
const title = document.querySelector("h1"); //找到要更改文字內容的h1節點

let count = 0; //宣告一個計數的變數

btn.addEventListener("click",function(e){
    count++; //計數器+1
    title.textContent=count; //印出結果
})

透過 nodeName 瞭解目前 DOM 的 HTML 位置

HTML

<input type="button" value="點擊" class="btn">

all.JS

const btn = document.querySelector(".btn");

console.log(btn.nodeName); //可以找到在哪個HTML標籤 會回傳input

e.target - 了解目前所在元素位置

可以寫在外層e.target讓你點擊裡面的各個地方
都能顯示出是點到哪個元素位置

HTML

<input type="button" value="點擊" class="btn">
    <ul class="list">
        <li>標題 <input type="button" class="btn" value="按鈕"></li>
        <li>標題</li>
    </ul>

all.JS

//e.target - 了解目前所在元素位置
const btn = document.querySelector(".btn"); //選取位置
btn.addEventListener("click", function (e) { //新增點擊事件
    console.log(e.target);
})
const list = document.querySelector(".list"); //選取位置

list.addEventListener("click",function(e){ //新增點擊事件
    console.log(e.target); //回傳目前元素所在位置
})

e.target 搭配 nodeName 節點，抓到你預期要做的事情

上面教完怎麼監聽到點擊的地方後
現在要來學 如果要寫if(我點擊到的是按鈕){}

承上題

//e.target.nodeName - 了解目前所在元素位置 > 的 " HTML標籤 "

const list = document.querySelector(".list"); //選取位置

list.addEventListener("click",function(e){ //新增點擊事件
    console.log(e.target.nodeName); //這樣則會回傳點到的元素裡的HTML標籤
    //因此就可以讓判斷如果標籤跟你要的一樣 執行if條件事
    if(e.target.nodeName == "INPUT"){  //!!!請注意INPUT等 html要大寫
        console.log("你點擊了按鈕");
    }
})

preventDefault - 取消預設觸發行為

接下來要講的是取消預設觸發行為
應用場景像是一些a連結或按鈕 預設原本就有功能
但你想要幫他寫入新的功能 讓舊的功能取消
就可以用到這個preventDefault

HTML

<!-- 取消 HTML 標籤默認行為 -->
    <a href="https://www.yahoo.com.tw">連結</a>
    <h1></h1>

all.JS

//preventDefault - 取消預設觸發行為
const myLink = document.querySelector("a"); //先選取到a連結

myLink.addEventListener("click",function(e){ //新增點擊事件
    e.preventDefault(); //取消預設觸發行為
    console.log('有被點擊到'); 
    document.querySelector('h1').textContent = "hello"; //將h1內的文字內容改為"hello"
})