JavaScript程序設(shè)計課件：第 5 章 事件和事件處理

1、第 5 章 事件和事件處理,2,5.1 理解事件,5.1.1 事件概述 日常生活中的事件：地震、火災(zāi)、臺風 使用電腦時發(fā)生的事件： 鼠標單擊鏈接、鼠標右擊對象、單擊按鈕、 按鈕失去焦點 有事件，有反映，有程序,3,5.1.2 事件類型,P86表5-1中，第一列(HTML組件)即為事件類型, 每一類組件對應(yīng)若干個事件。每一類組件對應(yīng)一個HTML標記。 5.1.3 事件處理器 語法格式如下： ,表5-2中事件處理屬性,4,5.2 處理事件, 其中： input type=button 事件類型為按鈕 value=click按鈕的鍵面字 onClick=alert(您單擊了按鈕!)事件處理器,5,例

2、5-1 作為HTML屬性的事件處理器, Example:作為HTML屬性的事件處理器 function pm(m) alert(m); Example:作為HTML屬性的事件處理器 ,6,通過JavaScript屬性處理事件P91,將事件處理器作為JavaScript的屬性，使程序像操作JavaScript屬性一樣來處理事件。 用HTML屬性指定的事件處理器為： 同樣的功能通過JavaScript屬性指定事件處理器來實現(xiàn)： Button.onclick= function() alert(按鈕的click事件被觸發(fā)！); 使用JavaScript的屬性來

3、表示事件處理器的好處： 減少了HTML和JavaScript的混合使用，簡潔明了。 事件處理器的代碼不必是確定的，可以根據(jù)需要動態(tài)創(chuàng)建和修改。,7,5.3 JavaScript中的事件處理, Example:鏈接的mouseOver事件 function pm(m) alert(m); Example:鏈接的mouseOver事件 請把鼠標放過來，看看會發(fā)生什么事情:) ,5.3.1 處理鏈接事件 例5-2,href= 鏈接的寫法 見P135,8,5.3.2 處理窗口事件 例5-3(P93), Example:窗口的load和unload事件 function lh() alert(窗口執(zhí)行了

4、load事件); function ulh() alert(窗口執(zhí)行了unload事件); Example:本窗口的load和unload事件 ,9,5.3.3 處理圖形事件 例5-4(P94), Example:圖形的load事件 function ilh() alert(圖形加載完成); Example:圖形的load事件 ,10,5.3.4 處理圖形映射事件 例5-5(P95), Example:圖形映射事件 function mh() alert(您單擊的是圖形第二個映射區(qū)!); Example:圖形映射事件 ,11,5.3.5 處理窗體事件 例5-6(P97), Example:窗體

5、事件 function cv(s) var len=s.length; for(var i=0;ilen;i+) if(s.charAt(i)!=) return false; return true;,判斷字符s是否為空, 空為true,非空為false,見P278,12,5.3.5 處理窗體事件 例5-6(P97),function okh() if(cv(document.test.userName.value) alert(用戶名稱不能為空!); else if(cv(document.test.passWord.value) alert(用戶密碼不能為空!); else alert(您填寫正確!); function ch() document.test.userName.value=; document.test.passWord.value=; ,13,5.3.5 處理窗體事件 例5-6(