淺談javascript基礎(chǔ)之客戶端事件驅(qū)動(dòng)
我們知道,面向?qū)ο蟀l(fā)展起來(lái)后,“一夜之間”,幾乎所有的語(yǔ)言都能基于對(duì)象了,JavaScript也是基于對(duì)象的語(yǔ)言。用戶在瀏覽器上的行為稱作“事件”,之后引發(fā)的一系列動(dòng)作,比如彈窗啦,改變?yōu)g覽器大小啦,驗(yàn)證啦,balabala,都叫做“事件驅(qū)動(dòng)”。當(dāng)然,這次我主要介紹幾個(gè)常常發(fā)生的事件。
ps:對(duì)于js腳本的支持以瀏覽器而定?。?!有的低版本的瀏覽器可能不支持?。。?/span>
1.單擊事件(onClick)
啥叫單擊事件呢?當(dāng)用戶單擊鼠標(biāo)按鈕是,就會(huì)產(chǎn)生單擊事件。同時(shí)onclick指定的事件處理程序?qū)?huì)被調(diào)用。通常應(yīng)用在button(按鈕對(duì)象)、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í),就會(huì)觸發(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)頁(yè)面中的元素被選中時(shí),就會(huì)觸發(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)頁(yè)時(shí),觸發(fā)的事件。
代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js基礎(chǔ)之加載事件</title> <script language="JavaScript"> function check(){ alert("莫急莫急,小D正在騎馬來(lái)的路上,O(∩_∩)O哈哈~"); } </script> </head> <body onload="check()"> </body> </html>
效果如下圖:
5.卸載前事件(beforeunload)
確切說(shuō),稱為“離開頁(yè)面前事件”比較恰當(dāng),當(dāng)你單擊當(dāng)前標(biāo)簽頁(yè)的關(guān)閉按鈕時(shí)會(huì)觸發(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>這是用來(lái)驗(yàn)證卸載前事件的頁(yè)面</h1> </body> </html>
效果如下圖:
以上這篇淺談javascript基礎(chǔ)之客戶端事件驅(qū)動(dòng)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 理解 Node.js 事件驅(qū)動(dòng)機(jī)制的原理
- js事件驅(qū)動(dòng)機(jī)制 瀏覽器兼容處理方法
- 快速掌握Node.js事件驅(qū)動(dòng)模型
- 詳解Javascript事件驅(qū)動(dòng)編程
- Node.js事件驅(qū)動(dòng)
- Node.js中的事件驅(qū)動(dòng)編程詳解
- 深入理解javaScript中的事件驅(qū)動(dòng)
- 你必須知道的Javascript知識(shí)點(diǎn)之"單線程事件驅(qū)動(dòng)"的使用
- JScript面向事件驅(qū)動(dòng)的編程
- 淺談JS和Nodejs中的事件驅(qū)動(dòng)
相關(guān)文章
javascript中call apply 與 bind方法詳解
網(wǎng)上文章雖多,大多復(fù)制粘貼,且晦澀難懂,我希望能夠通過(guò)這篇文章,能夠清晰的提升對(duì)apply、call、bind的認(rèn)識(shí),并通過(guò)一些具體的示例給大家展示下這3個(gè)方法的用法,希望大家能夠喜歡。2016-03-03JavaScript中的正則表達(dá)式簡(jiǎn)明總結(jié)
這篇文章主要介紹了JavaScript中的正則表達(dá)式,簡(jiǎn)明總結(jié)了正則中的語(yǔ)法含義和RegExp對(duì)象,需要的朋友可以參考下2014-04-04

Javascript基礎(chǔ)教程之JavaScript語(yǔ)法