在前面的文章中,我們有看到onclick,但沒有實際說明,而今天讓我們一起看看到底甚麼是Javascipt事件吧! 讓我們舉一些平常在瀏覽網頁時,就會使用到的例子,像是當一個購物網站,點加入購物車按鈕時,會跳出已加入成功的通知,或是把鼠標移到圖片上,會有放大的效果、及一開啟網頁,就有討人厭的蓋板廣告,其實onclick是發生在html元素(按鈕button)的事情,可以透過Javascript去處理這些事件,達到我們要的效果。
這邊舉一個簡單的例子,當按鈕按下時顯示當前時間。
<body>
現在時間是
<div id="demo"></div>
<button type="button" onclick="btn()">按鈕</button>
<script>
function btn() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
當按鈕按下時(Html事件),調用Javascript函數,執行函數裡要做的事情。
則Html事件就只有按鈕按下(onclick)而已嗎?
<body>
<p id="text">段落變色</p>
<div>
<select name="" id="" onchange="colorChange(value)">
<option value="1">選項一</option>
<option value="2">選項二</option>
<option value="3">選項三</option>
</select>
</div>
<button type="button" class="btn" onclick="btn()">按鈕</button>
<script>
function colorChange(a) {
if (a == 1) document.getElementById("text").style.color = "red";
else if (a == 2) document.getElementById("text").style.color = "blue";
else document.getElementById("text").style.color = "yellow";
}
</script>
</body>
當select選項改變(onchange)時,就會更改段落的顏色。
<body>
<input type="text" id="inputDemo" />
<button type="button" class="btn" onclick="btn()">按鈕</button>
<script>
function btn() {
alert("按鈕按下");
}
const input = document.getElementById("inputDemo");
input.addEventListener("keypress", function (event) {
if (event.key === "Enter") {
event.preventDefault();
btn();
}
});
</script>
</body>
當按下Enter,或是按下按鈕時觸發btn函數,監聽keypress按下事件(按下enter)。
<body>
<img
src="https://fakeimg.pl/250x100/"
onmouseover="big(this)"
onmouseout="normal(this)"
alt=""
/>
<script>
function big(a) {
a.style.height = "300px";
a.style.width = "400px";
}
function normal(a) {
a.style.height = "100px";
a.style.width = "250px";
}
</script>
</body>
當鼠標滑到圖片上時圖片放大,移出時回到原本的尺寸!
今天我們簡單介紹了各種事件,透過Javascript我們可以抓取這些Html事件要執行哪些動作,調用函數。明天我們將繼續介紹儲存的好朋友陣列!