JavaScript 小學 — event 事件(ep1)
什麼是 event 事件？🧐
JavaScript 是一個以事件驅動 (Event-driven) 的程式語言，使用者在瀏覽網頁時會觸發很多事件的發生，例如按下滑鼠是一種事件、按下鍵盤按鍵是一種事件、網頁或圖片完成下載時是一種事件、表單欄位值被改變是一種事件..等等，而這個 event 同時也是一個物件 Event Object，其中包含很多屬性，我們可以利用來做很多事情🙆♂️🙆♂️。
我們用最簡單的「滑鼠點擊事件」來解析，假設畫面中有一個按鈕😉，當我們按下去會有一個 event ，平常用不到，但我們可以在 function 的 () 放入參數 e，就可以在 {} 使用事件物件：
- 先取得這個按鈕的節點
- 給予這個按鈕一個點擊監聽，當點擊這個按鈕時，就會觸動function
function(e){...}()中有個 e ，就會產生一個點擊事件的物件，裡面保存各種諮詢，例如clientX: 8、clientY: 26就是按下滑鼠那瞬間在畫面的位置。
let el =document.querySelector('.btn');
function check(e){
console.log(e);
console.log(e.clientX);//8
};
el.addEventListener('click',check);事件綁定
執行事件之前，我們得先綁定，事件綁定綁定分為三種：
- 寫在 HTML 標籤中，不安全不推薦！
- on-event ：就是像上面的
[on.click](<http://on.click>)一樣，它比較不好的地方是不能一次綁定兩個事件，他只會吃到最後一次綁定。 - addEventListener：跟 on-event 不同，可以吃到全部的綁定。false 記得要加
所謂方法 2 和 3 綁定差異問題，可以看看下面的程式範例😇：
btnOnClick.onclick 會 alert 出 onclickHI-2，而addEvent.addEventListener 會 alert 出 addEvent-1 和 addEvent-2～～
//onClick
let btnOnClick =document.querySelector('.btnOnClick');
btnOnClick.onclick=function (){ alert('onclickHI-1'); }
btnOnClick.onclick=function (){ alert('onclickHI-2'); }
//addEventListener
let addEvent=document.querySelector('.addEvent');
addEvent.addEventListener('click',check1,false);
addEvent.addEventListener('click',check2,false);
function check1(e){ alert('addEvent-1'); }
function check2(e){ alert('addEvent-2'); }Event Bubbling & Event Capturing
剛剛addEventListener監聽最後不是有一個 false🤟，這個就是所謂「冒泡事件」，像泡泡一樣會長大，意思是當我們觸發事件時，事件會一層一層的延伸觸發！而這個的 true 和 false 就是控制它是由外而內還是向內而外觸發。
- 事件氣泡 Event Bubbling：false，從指定元素向外找。
預設不寫就是 false，所以不寫也行拉～
var btn=document.querySelector('.btn');
btn.addEventListener('click',fucntion(){
alert('btn');},false);
var body=document.querySelector('.body');
body.addEventListener('click',fucntion(){
alert('body');},false);
//由於是由內向外，會是先 alert btn 才alert body，這樣比較合乎邏輯。- 事件捕捉Event Capturing：true，從最外層向內找指定元素。
var btn=document.querySelector('.btn');
btn.addEventListener('click',fucntion(){
alert('btn');},true);
var body=document.querySelector('.body');
body.addEventListener('click',fucntion(){
alert('body');},ture);
//由於是由外而內，會是先 alert body 才 alert btn注意是由外而內，不是向外延伸喔，表示說如果有一個 div小卡 和 div卡片 裡的按鈕，如果兩者都有跑 js，那會先觸發div的才會觸發按鈕的！因為他們本身的範圍是重疊的啊！😱😱
中止冒泡事件：stopPropagation
上面的兩種事件觸發模式，都會連動到其他層的事件，一般來說不會有想要按一個地方反而觸發兩個地方的事件👻對吧～就可以用stopPropagation 來解決因為元素重疊而互相干擾的狀況，所以簡單來說『阻止氣泡繼續變大，就不會往外找』。
<div class="btnBox">
<input type="button" class="btn" value="點擊">
</div>所以如果像上面的情況不想點 btn 時，不想觸發到 btnBox 的話，就用這個中止冒泡事件吧～
var btn=document.querySelector('.btn');
btn.addEventListener('click',fucntion(){
alert('btn');
//終止
e.stopPropagation;},false);取消預設觸發行為：preventDefault
有些元素天生就自帶技能🤩🤩🤩，而 event object 有一個 preventDefault 方法用來取消預設的行為。
舉兩個常用來取消的例子：
- 按鈕用a標籤，因為a標籤必須要寫上連結，但點擊就是跳轉頁面。
- form的submit就會自動傳送資料。
var btn=document.querySelector('.link');
btn.addEventListener('click',fucntion(e){
//取消元素默認行為
//原本連結會自動跳轉到指定網頁
e.preventDefault();
console.log('test');
},false);上面的 code 就是取消a標籤的預設功能，然後要拿來 console 字串。
event 太長了！！ 拆成兩篇～下篇會分享幾個 event object 常見屬性。
