iT邦幫忙

0

JavaScript基礎知識-事件(1)

終於研究到了事件的部分了,所謂的事件,是當使用者對頁面做出什麼動作的意思,例如:滑鼠點擊,按下鍵盤...之類的,而當使用者有這些動作時,我們又該給予什麼樣式的回應,這都可以透過 JavaScript 來撰寫

一般在撰寫事件時,會有三種方式,第一種也是較為早期的一種,也是不推薦使用的方式,因為較容易受到外來的攻擊:

<input type="button" class="btn" value="點擊" onclick="hello();">

上述程式碼是在撰寫,當點擊這顆按鈕時,會觸發 hello 這個 function,沒錯,關鍵是在 onclick="hello();" 在這裡面可以撰寫 JS,所以也較容易受到外來的方式改寫程式碼,也是較為危險的方式

而第二種,以上述的按鈕為例:

var el = document.querySelector('.btn');
el.onclick = function(){
    alert('Hello');
}

這種方式是直接把我們的事件全部寫在 JS 檔內,而不是 HTML 內

而第三種,是較為新的寫法:

var el = document.querySelector('.btn');
el.addEventListener('click',function(){
    alert('Hello');
})

沒錯,是採用 .addEventListener() 這個方法,俗稱事件監聽,來做事件的綁定
大家可以分別試試看,三種方法的事件撰寫,下一篇來講解其差異性。


尚未有邦友留言

立即登入留言