JavaScript知識筆記(二)——事件

事件

JavaScript?創建動態頁面。事件是可以被 JavaScript 偵測到的行為。 網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數或程序的事件。

比如說,當用戶單擊按鈕或者提交表單數據時,就發生一個鼠標單擊(onclick)事件,需要瀏覽器做出處理,返回給用戶一個結果。

主要事件表:

鼠標單擊事件( onclick ):

onclick是鼠標單擊事件,當在網頁上單擊鼠標時,就會發生該事件。同時onclick事件調用的程序塊就會被執行,通常與按鈕一起使用。

比如,我們單擊按鈕時,觸發?onclick?事件,并調用兩個數和的函數add2()。代碼如下:

<html>
<head><script type="text/javascript">function add2(){var numa,numb,sum;numa=6;numb=8;sum=numa+numb;document.write("兩數和為:"+sum);  }</script>
</head>
<body><form><input name="button" type="button" value="點擊提交" οnclick="add2()" /></form>
</body>
</html>

注意:?在網頁中,如使用事件,就在該元素中設置事件屬性。

鼠標經過事件(onmouseover)

鼠標經過事件,當鼠標移到一個對象上時,該對象就觸發onmouseover事件,并執行onmouseover事件調用的程序。

現實鼠標經過"確定"按鈕時,觸發onmouseover事件,調用函數info(),彈出消息框,代碼如下:

運行結果:

鼠標移開事件(onmouseout)

鼠標移開事件,當鼠標移開當前對象時,執行onmouseout調用的程序。

當把鼠標移動到"登錄"按鈕上,然后再移開時,觸發onmouseout事件,調用函數message(),代碼如下:

運行結果:

?

光標聚焦事件(onfocus)

當網頁中的對象獲得聚點時,執行onfocus調用的程序就會被執行。

如下代碼, 當將光標移到文本框內時,即焦點在文本框內,觸發onfocus 事件,并調用函數message()。

運行結果:

失焦事件(onblur)

onblur事件與onfocus是相對事件,當光標離開當前獲得聚焦對象的時候,觸發onblur事件,同時執行被調用的程序。

如下代碼, 網頁中有用戶和密碼兩個文本框。當前光標在用戶文本框內時(即焦點在文本框),在光標離開該文本框后(即失焦時),觸發onblur事件,并調用函數message()。

運行結果:

內容選中事件(onselect)

選中事件,當文本框或者文本域中的文字被選中時,觸發onselect事件,同時調用的程序就會被執行。

如下代碼,當選中用戶文本框內的文字時,觸發onselect 事件,并調用函數message()。

運行結果:

文本框內容改變事件(onchange)

通過改變文本框的內容來觸發onchange事件,同時執行被調用的程序。

如下代碼,當用戶將文本框內的文字改變后,彈出對話框“您改變了文本內容!”。

運行結果:

加載事件(onload)

事件會在頁面加載完成后,立即發生,同時執行被調用的程序。
注意:

? ? ? ? ?1.?加載頁面時,觸發onload事件,事件寫在<body>標簽內。

? ? ? ? ?2. ?加載頁面,可理解為打開一個新頁面時。
如下代碼,當加載一個新頁面時,彈出對話框“加載中,請稍等…”(
網頁版新浪微博登錄)。

運行結果:

卸載事件(onunload)

當用戶退出頁面時(頁面關閉、頁面刷新等),觸發onUnload事件,同時執行被調用的程序。

注意:不同瀏覽器對onunload事件支持不同。

如下代碼,當退出頁面時,彈出對話框“您確定離開該網頁嗎?”。

運行結果:(IE瀏覽器)

—————————————————————————————————————————————————————————

以上內容參考自慕課網:http://www.imooc.com

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/386127.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/386127.shtml
英文地址,請注明出處:http://en.pswp.cn/news/386127.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

HTML如何添加錨點,我先收藏為敬

背景 我18年本科畢業&#xff0c;年前已有換工作想法&#xff0c;一直沒有付諸行動&#xff0c;疫情爆發后回到老家&#xff0c;年后開始找工作&#xff0c;對于自己水平不是很清楚&#xff0c;之前找工作一直都挺順利的。大學畢業沒有留在實習單位繼續做前端開發&#xff0c;…

JavaScript知識筆記(三)——內置對象、瀏覽器對象

內置對象&#xff1a; &#xff08;與Java很像&#xff09;JavaScript 中的所有事物都是對象&#xff0c;如:字符串、數值、數組、函數等&#xff0c;每個對象帶有屬性和方法。 對象的屬性&#xff1a;反映該對象某些特定的性質的&#xff0c;如&#xff1a;字符串的長度、圖像…

HTML如何添加錨點,文末領取面試資料

開始 我大學讀的是大專&#xff0c;在學校學的是機電一體化。臨近畢業的時候選擇了學習web前端技術&#xff0c;因為做機電實在又累工資又低&#xff0c;而我更喜歡坐辦公室的工作&#xff0c;有空調吹&#xff0c;我很現實&#xff0c;就是想多賺一點錢。到現在做了兩年前端的…

HTML如何添加錨點,論程序員成長的正確姿勢

前言 年前準備換工作&#xff0c;總結了一波面試最頻繁的面試問題跟大家交流。此文章是關于瀏覽器的常見問題&#xff0c;大概面試10家遇到6家提問類似問題&#xff08;主要是大廠和中廠&#xff09;。目前入職滴滴出行成都團隊。 css盒模型 1&#xff0c;css盒模型基本概念…

DOM(文檔對象模型)

文檔對象模型DOM&#xff08;Document Object Model&#xff09;定義訪問和處理HTML文檔的標準方法。 DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構&#xff08;節點樹&#xff09;。 先來看看下面代碼: 將HTML代碼分解為DOM節點層次圖: HTML文檔可以說由節點構成的集合&…

HTML實體字符列表,總結到位

前言 每年畢業季都能聽到很多報道說大學畢業生找工作難&#xff0c;以前看到這類新聞一直覺得無所謂。因為總覺得離我還早&#xff0c;但今年輪到我畢業了&#xff0c;才發現不幸終于降臨到我的頭上。 簡歷 首先肯定是要準備一份自己的簡歷&#xff0c;簡歷經常是給面試官的第…

java實現矩陣相乘

眾所周知&#xff0c;矩陣的乘法就是矩陣的行列相乘再相加。話不多說&#xff0c;直接上代碼&#xff1a; package test;public class matrixMultiply {public static void printMatrix(int[][] a, int[][] b) {int r a.length;int c b[0].length;double result[][] new dou…

你必須知道的CSS盒模型,面試建議

什么是HTML? HTML: ( Hypertext Markup Language )超文本標記語言&#xff0c;是一種標識性的語言。它包括一系列標簽&#xff0e;通過這些標簽可以將網絡上的文檔格式統一&#xff0c;使分散的Internet資源連接為一個邏輯整體。 特點: 簡易性&#xff1a;超級文本標記語言版…

你必須知道的CSS盒模型,順利通過阿里面試

前言 正式學習前端大概 3 年多了&#xff0c;接觸前端大概 4 年了&#xff0c;很早就想整理這個書單了&#xff0c;因為常常會有朋友問&#xff0c;前端該如何學習&#xff0c;學習前端該看哪些書&#xff0c;我就講講我學習的道路中看的一些書&#xff0c;雖然整理的書不多&a…

java中的幾種泛型類——HashSet、HashMap、TreeSet、TreeMap,遍歷map,排序,HashTable比較

HashSet HashSet<E>泛型類在數據組織上類似于數學上的集合&#xff0c;可以進行“交”、“并”、“差”等運算。HashSet<E>泛型類創建的對象稱為集合&#xff0c;如&#xff1a;HashSet<E> set HashSet<String>();那么set就是一個可以存儲string類型…

保駕護航金三銀四,100%好評!

前端的興起 前端真正興起和開始頻繁出現在大家的視線里&#xff0c;大概是在十年前。彼時的 Web 開發基本是由后端主導&#xff0c;前端能做的只是校驗一下數據、操作一下 DOM。&#xff08;其中數據檢驗是 JS 產生的根本原因&#xff1a;當時網絡太慢&#xff0c;在服務端檢驗…

java連接mysql數據庫(JDBC),存到二維數組里并輸出

java連接mysql數據庫都有固定的操作&#xff0c;步驟如下&#xff1a; 加載mysql驅動&#xff0c;一般都是com.mysql.jdbc.Driver。提供JDBC連接的URL。 創建數據庫的連接。要連接數據庫&#xff0c;需要向java.sql.DriverManager請求并獲得Connection對象。 創建一個Statem…

保駕護航金三銀四,萬字解析!

從事前端開發工作差不多3年了&#xff0c;自己也從一個什么都不懂的小白積累了一定的理論和實踐經驗&#xff0c;并且自己也對這3年來的學習實踐歷程有一個梳理&#xff0c;以供后面來細細回憶品味。 1、為什么選擇學習前端開發&#xff1f; 你可能是因為興趣&#xff0c;完成…

數據降維技術——PCA(主成分分析)

為什么要對數據進行降維&#xff1f; 在機器學習或者數據挖掘中&#xff0c;我們往往會get到大量的數據源&#xff0c;這些數據源往往有很多維度來表示它的屬性&#xff0c;但是我們在實際處理中只需要其中的幾個主要的屬性&#xff0c;而其他的屬性或被當成噪聲處理掉。比如&a…

保駕護航金三銀四,使用指南

前言 作為一個程序員&#xff0c;當然總是期望自己的代碼能「一次編寫&#xff0c;四處運行」&#xff0c;但真實經驗往往是「一處修改&#xff0c;百處填坑」&#xff0c;依賴落后了好幾個版本了想要升級、老代碼已經看著很不爽了打算重構&#xff0c;都需要下堅決的決心&…

社交網絡初探——鏈路預測

社交網絡可以用來描述現實社會中的實際網絡&#xff0c;它包括人與人之間的社會關系&#xff0c;物種之間的捕食關系&#xff0c;科學研究中的合作關系等。大量研究已經表明在真實世界中各種不同社交網絡具有許多共同的結構特征&#xff0c;例如小世界性質、無標度性、社團結構…

保駕護航金三銀四,內容太過真實

前言 正式學習前端大概 3 年多了&#xff0c;接觸前端大概 4 年了&#xff0c;很早就想整理這個書單了&#xff0c;因為常常會有朋友問&#xff0c;前端該如何學習&#xff0c;學習前端該看哪些書&#xff0c;我就講講我學習的道路中看的一些書&#xff0c;雖然整理的書不多&a…

決策樹——ID3和C4.5

決策樹&#xff08;decision tree&#xff09;是一個樹結構&#xff08;可以是二叉樹或非二叉樹&#xff09;。其每個非葉節點表示一個特征屬性上的測試&#xff0c;每個分支代表這個特征屬性在某個值域上的輸出&#xff0c;而每個葉節點存放一個類別。使用決策樹進行決策的過程…

保駕護航金三銀四,分分鐘搞定!

開頭 Web前端開發基礎知識學習路線分享&#xff0c;前端開發入門學習三大基礎&#xff1a;HTML、CSS、JavaScript。除此之外還要學習數據可視化、Vue、React、Angular相關框架&#xff0c;熟練運用框架提升開發效率&#xff0c;提升穩定性。 [外鏈圖片轉存失敗,源站可能有防盜…

數組的初始化及輸出

二維數組可以不初始化列數&#xff08;第二維&#xff09;。 下面給出的例子是用兩種不同的方式存儲二維數組并輸出&#xff1a; 1. 這是我們通俗易懂的二維數組存儲方法&#xff1a; String[][] data new String[][] {{ "youth", "high", "no&quo…