iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
Modern Web

想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧系列 第 17

[想試試看JavaScript ] 事件處理

事件處理

事件處理就是當使用者對畫面做了一個動作,我們的程式必須偵測這個動作,並且做出反應。
如果事件沒有被觸發,也就是使用者沒有動作,程式就不會有任何反應。
例如,加入購物車按紐,在我按下按鈕後就會反應並將商品加入購物車。
另外,如果我沒有按下按鈕的話,就不會有任何商品被加入購物車。

click 事件

click 事件就是用滑鼠點擊會有反應的事件
範例,HTML 程式碼

<html>
<head>
<script>

</script>
</head>
<body>
    <button onclick="alert('click');">Click</button>
</body>
</html>

這樣就是一個基本的事件處理,我按下 Click 的話就會跳出警告視窗,顯示 click。
alert('click') 這裡面用單引號,因為 onclick="" 已經使用了雙引號,為了讓程式可以順利的閱讀,所以 alert 使用單引號將字串包括住。

mouseover mouseout 事件

上面嘗試了 click 事件
現在來寫寫 mouseovermouseout 事件
mouseover 在滑鼠移動進目標元素會觸發
mouseout 在滑鼠移動出目標元素會觸發

<html>
<head>
<script>

</script>
</head>
<body>
    <button onclick="alert('click');">Click</button>
    <span onmouseover="this.style.color='red';"
    onmouseout="this.style.color='black';">test</span>
</body>
</html>

mouseover 觸發就執行 this.style.color='red'; 這段程式,將文字改成紅色
mouseout 觸發就執行 this.style.color='black'; 這段程式,將文字改成黑色
style.color 是 DOM 提供的屬性,可以控制元素的文字顏色。

註冊事件的方法

事件處理,並不會一載入 Javascript 程式碼就馬上執行,而是會等使用者觸發事件後,才會運作裡面的程式。
所以我們會註冊事件監聽器,等使用者觸發事件就執行。
也就是,我們一樣要預先設定一段程式碼,這些程式碼會一直等待,只要使用者觸發事件就會馬上執行。
例如,我希望按下按鈕就會跳出訊息,我會註冊 click 事件

<button onclick="alert('click');">Click</button>

接著 onclick 屬性的程式碼就會一直等待,只要使用者點了 就馬上執行 alert('click')

那麼註冊事件的方法有三種

HTML 屬性

寫在 HTML 上面,透過 on+事件名 的屬性來註冊
範例:

<button onclick="alert('click');">Click</button>

使用 onclick 屬性,在 標籤註冊 click 事件

DOM API 屬性

寫在 Javascript 裡,使用 HTML DOM 提供的方法註冊
要操作的目標.on+事件名=要執行的函式
範例:

<script>
window.onclick=function(){
   alert('click');
}
</script>

我在 標籤註冊了 click 事件,只要點擊到瀏覽器的外框就會啟動

如果我註冊在 標籤的話,因為畫面中可以有很多個 標籤,要先讓瀏覽器知道我註冊在哪個標籤
所以要使用 DOM 裡的 getElementById(),得到我想操作的標籤

  1. 我給 一個 id 屬性叫 btn
  2. 在小括弧寫我想操作的標籤 id 的值,document.getElementById("btn"),並將得到的標籤放進變數
  3. on+事件名 註冊事件,並將要執行的函式放進去
<body>
    <button id="btn">Click</button>
<script>
var btn=document.getElementById("btn"); // 得到 button 標籤放進變數 btn 裡
btn.onclick=function(){  // 註冊事件,並將要執行的函式放進去
    alert('click');
}
</script>
</body>

addEventListener

使用事件監聽器註冊
寫在 Javascript 裡,使用 addEventistener(),語法如下

要操作的目標.addEventListener(事件名稱,事件的處理器,是否為捕獲模式)

範例:

<body>
    <button id="btn">Click</button>
<script>
var btn=document.getElementById("btn");
btn.addEventListener('click',function(){ alert('click') },false)
</script>
</body>

這樣 button 按下去之後一樣可以跳出警告視窗


為什麼註冊事件要有三種不同的寫法呢? HTML 屬性、DOM 屬性、addEventLitener()
這三種有什麼差異?
寫的順序還需要注意什麼?
就請參考下一篇吧^^


上一篇
[想試試看JavaScript ] 瀏覽器裡的 Javascript
下一篇
[想試試看JavaScript ] 為什麼需要這麼多種註冊事件處理的方式
系列文
想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言