淺談javascript基礎(chǔ)之客戶端事件驅(qū)動
我們知道，面向?qū)ο蟀l(fā)展起來后，“一夜之間”，幾乎所有的語言都能基于對象了，JavaScript也是基于對象的語言。用戶在瀏覽器上的行為稱作“事件”,之后引發(fā)的一系列動作，比如彈窗啦，改變?yōu)g覽器大小啦，驗(yàn)證啦，balabala，都叫做“事件驅(qū)動”。當(dāng)然，這次我主要介紹幾個(gè)常常發(fā)生的事件。
ps：對于js腳本的支持以瀏覽器而定！！！有的低版本的瀏覽器可能不支持?。。?/span>
1.單擊事件（onClick）
啥叫單擊事件呢？當(dāng)用戶單擊鼠標(biāo)按鈕是，就會產(chǎn)生單擊事件。同時(shí)onclick指定的事件處理程序?qū)徽{(diào)用。通常應(yīng)用在button（按鈕對象）、checkbox（復(fù)選框）、radio（單選按鈕）、reset buttons（重置按鈕）、submit buttons（提交按鈕）上。
放大招：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基礎(chǔ)之單擊事件</title>
</head>
<body>
<form>
<script language="JavaScript">
function aclick(){
alert("你剛才單擊了按鈕");
}
</script>
<input type="button" value="按鈕" onclick= "aclick()" />
</form>
</body>
</html>
效果如下圖：
2.更改事件（onChange）
一旦用戶更改表單的值時(shí)，就會觸發(fā)onchange事件。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基礎(chǔ)之更改事件</title>
<script language="JavaScript">
function check() {
alert("文本框的值發(fā)生了變化");
}
</script>
</head>
<body>
<form>
<input type="text" value="這是一個(gè)文本框" name="name" onchange="check()"/>
</form>
</body>
</html>
效果如下圖 ：
3.選中事件（onSelect）
當(dāng)頁面中的元素被選中時(shí)，就會觸發(fā)onselect事件。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基礎(chǔ)之更改事件</title>
<script language="JavaScript">
function check() {
alert("文本框的值發(fā)生了變化");
}
</script>
</head>
<body>
<form>
<input type="text" value="這是一個(gè)文本框" name="name" onchange="check()"/>
</form>
</body>
</html>
效果如下圖：
4.加載事件（onLoad）
加載事件是在剛剛打開網(wǎng)頁時(shí)，觸發(fā)的事件。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基礎(chǔ)之加載事件</title>
<script language="JavaScript">
function check(){
alert("莫急莫急，小D正在騎馬來的路上,O(∩_∩)O哈哈~");
}
</script>
</head>
<body onload="check()">
</body>
</html>
效果如下圖：
5.卸載前事件（beforeunload）
確切說，稱為“離開頁面前事件”比較恰當(dāng)，當(dāng)你單擊當(dāng)前標(biāo)簽頁的關(guān)閉按鈕時(shí)會觸發(fā)此事件。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基礎(chǔ)之卸載前事件</title>
<script language="JavaScript">
function check1(){
alert("你真的要離我而去呢？╥﹏╥...");
}
</script>
</head>
<body onbeforeunload= "check1()">
<h1>這是用來驗(yàn)證卸載前事件的頁面</h1>
</body>
</html>
效果如下圖：
以上這篇淺談javascript基礎(chǔ)之客戶端事件驅(qū)動就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解JavaScript中的客戶端消息框架設(shè)計(jì)原理
這篇文章主要介紹了詳解JavaScript中的客戶端消息框架設(shè)計(jì)原理,包括客戶端和服務(wù)器端的通信等方面的內(nèi)容,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了JavaScript中的slice()方法使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了簡介JavaScript中的setDate()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
Javascript實(shí)例教程(19) 使用HoTMetal(3)
Javascript實(shí)例教程(19) 使用HoTMetal(3)...2006-12-12
淺談javascript基礎(chǔ)之客戶端事件驅(qū)動
下面小編就為大家?guī)硪黄獪\談javascript基礎(chǔ)之客戶端事件驅(qū)動。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
javascript中判斷一個(gè)值是否在數(shù)組中并沒有直接使用
在JS中要判斷一個(gè)值是否在數(shù)組中并沒有函數(shù)直接使用，如PHP中就有in_array()這個(gè)函數(shù),可以寫一個(gè)類似in_array()函數(shù)功能的方法2012-12-12
在JavaScript中操作時(shí)間之setYear()方法的使用
這篇文章主要介紹了在JavaScript中操作時(shí)間之setYear()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
深入Javascript函數(shù)、遞歸與閉包(執(zhí)行環(huán)境、變量對象與作用域鏈)使用詳解