詳細解讀javascript客戶端事件驅動（圖文教學）
- 亚连原創
- 2018-05-21 10:14:231316瀏覽
下面我就為大家帶來一篇淺談javascript基礎之客戶端事件驅動。現在就分享給大家，也給大家做個參考。
我們知道，物件導向發展起來後，“一夜之間”，幾乎所有的語言都能基於物件了，JavaScript也是基於物件的語言。使用者在瀏覽器上的行為稱作「事件」,之後引發的一系列動作，例如彈跳窗啦，改變瀏覽器大小啦，驗證啦，balabala，都叫做「事件驅動」。當然，這次我主要介紹幾個常常發生的事件。
ps：對於js腳本的支援是以瀏覽器而定！ ！ ！有的低版本的瀏覽器可能不支援！ ！ ！
1.點擊事件（onClick）
啥叫點擊事件呢？當使用者點擊滑鼠按鈕是，就會產生點擊事件。同時onclick指定的事件處理程序將會被呼叫。通常會應用在button（按鈕物件）、checkbox（複選框）、radio（單選按鈕）、reset buttons（重置按鈕）、submit buttons（提交按鈕）。
放大招：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基础之单击事件</title>
</head>
<body>
<form>
<script language="JavaScript">
function aclick(){
alert("你刚才单击了按钮");
}
</script>
<input type="button" value="按钮" onclick= "aclick()" />
</form>
</body>
</html>效果如下圖：
#2.更改事件（onChange）
一旦使用者更改表單的值時，就會觸發onchange事件。
程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基础之更改事件</title>
<script language="JavaScript">
function check() {
alert("文本框的值发生了变化");
}
</script>
</head>
<body>
<form>
<input type="text" value="这是一个文本框" name="name" onchange="check()"/>
</form>
</body>
</html>效果如下圖：
#3.選取事件（onSelect）
當頁面中的元素被選取時，就會觸發onselect事件。
程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基础之更改事件</title>
<script language="JavaScript">
function check() {
alert("文本框的值发生了变化");
}
</script>
</head>
<body>
<form>
<input type="text" value="这是一个文本框" name="name" onchange="check()"/>
</form>
</body>
</html>效果如下圖：
#4.載入事件（onLoad）
載入事件是在剛開啟網頁時，觸發的事件。
程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基础之加载事件</title>
<script language="JavaScript">
function check(){
alert("莫急莫急，小D正在骑马来的路上,O(∩_∩)O哈哈~");
}
</script>
</head>
<body onload="check()">
</body>
</html>效果如下圖：
#5.卸載前事件（beforeunload）
#確切地說，稱為「離開頁面前事件」比較恰當，當你點擊目前標籤頁的關閉按鈕時會觸發此事件。
程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基础之卸载前事件</title>
<script language="JavaScript">
function check1(){
alert("你真的要离我而去呢？╥﹏╥...");
}
</script>
</head>
<body onbeforeunload= "check1()">
<h1>这是用来验证卸载前事件的页面</h1>
</body>
</html>效果如下圖：
#上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
以上是詳細解讀javascript客戶端事件驅動（圖文教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn