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 常見屬性。