📚 event === HTML: ```html= <body> <input type="button" value="點擊" class="btn"> <h1>標題</h1> <script src="all.js"></script> </body> ``` JS: ```javascript= const btn = document.querySelector(".btn"); const title = document.querySelector("h1"); //監聽事件 btn.addEventListener("click",function(e){title.textContent = "按鈕已被點擊";}); //或著你可以寫成 document.querySelector(".btn").addEventListener("click",function(e){title.textContent = "按鈕已被點擊";}); ``` > "click":觸發點擊事件 > > e: mouse event的縮寫捕足點擊時當下的狀態，可以以讀取屬性的方式讀取"e"裡面的資料 > (ex: btn.addEventListener("click",function(e){console.log(e.clientX );})讀取座標、e.target讀取所在的元素位置 :::success 若我想要抓的是input標籤，則可以使用console.log(btn.==nodeName==); //input ::: :::success 一般來說用class會比用標籤來得更保險一點，因為一HTML可能會有很多個input標籤 ::: HTML: ```html= <!--監聽鍵盤可以使用keydown--> <body> <input type="text"> </body> ``` JS: ```javascript= const input = document.querySelector("input"); input.addEventListener('keydown',function(e){ console.log(e.key) }) ``` HTML: ```html= <!--可以不用每一個都綁監聽，只綁一個範圍，利用回傳標籤的方式就可以知道使用者現在是按到什麼了--> <ul class="list"> <li>標題<li> <li>標題<li> <input type="button" value="點擊" class="btn"> </ul> ``` JS: ```javascript= const list = document.querySelector(".list");//選到整個ul li list.addEventListener("click",function(e){ //監聽 console.log(e.traget.nodeName); //抓取點擊的標籤，以此例為input console.log(e.traget.value); //抓取點擊的value，以此例為點擊 if(e.target.nodeName === "INPUT"){ //當抓到INPUT(按鈕)時顯示 console.log("你目前點到按鈕了!");} else if(e.traget.value === undefined){ console.log("你點擊到空的地方");} }); ``` HTML: ```html= <!--另一種大範圍監聽可以寫成--> <body> <div class="box"> <span>標籤1</span> <input type="button" value="檢視1" class="view"> <span>標籤2</span> <input type="button" value="檢視2" class="view"> <span>標籤3</span> <input type="button" value="檢視3" class="view"> </div> <script src="all.js"></script> </body> ``` JS: ```javascript= const list = document.querySelector(".box"); list.addEventListener("click",function(e){ if(e.target.getAttribute("class") === "view"){ console.log(e.target.getAttribute("value")) } }) //按到檢視1->顯示檢視1 //按到檢視2->顯示檢視2 //按到檢視3->顯示檢視3 ``` HTML: ```html= <body> <input type="button" value="點擊" class="btn"> <h1>0</h1> <script src="all.js"></script> </body> ``` JS: ```javascript= //加法器 const btn = document.querySelector(".btn"); const title = document.querySelector("h1"); let count = 0; btn.addEventListener("click",function(e){ count++; title.textContent = count; }); ``` HTML: ```html= <!--取消HTML標籤的默認行為--> <a href="#">連結</a> <h1></h1> ``` JS: ```javascript= //我其實希望使用者點到連結時程式不會執行連結而是執行下面的程式 const myLink = document.querySelector("a"); myLink.addEventListener("click",function(e){ e.preventDefault(); console.log("有被點擊到"); document.querySelector("h1").textContent = "Hello"; }); ``` > .preventDefault(); 取消預設的行為