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

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

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

3、表示事件處理器的好處： 減少了HTML和JavaScript的混合使用，簡(jiǎn)潔明了。 事件處理器的代碼不必是確定的，可以根據(jù)需要?jiǎng)討B(tài)創(chuàng)建和修改。,7,5.3 JavaScript中的事件處理, Example:鏈接的mouseOver事件 function pm(m) alert(m); Example:鏈接的mouseOver事件 請(qǐng)把鼠標(biāo)放過(guò)來(lái)，看看會(huì)發(fā)生什么事情:) ,5.3.1 處理鏈接事件 例5-2,href= 鏈接的寫(xiě)法 見(jiàn)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(您單擊的是圖形第二個(gè)映射區(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,見(jiàn)P278,12,5.3.5 處理窗體事件 例5-6(P97),function okh() if(cv(document.test.userName.value) alert(用戶(hù)名稱(chēng)不能為空!); else if(cv(document.test.passWord.value) alert(用戶(hù)密碼不能為空!); else alert(您填寫(xiě)正確!); function ch() document.test.userName.value=; document.test.passWord.value=; ,13,5.3.5 處理窗體事件 例5-6(