7事件上日常生活中

1、事件上1. 事件的概念 日常生活中事件: 發(fā)生并得到處理的操作(即事情來了, 然后處理) 比如： 1. 電話鈴聲響起(事件發(fā)生) 需要接電話（處理） 2. 學(xué)生舉手請教問題(有事了) 需要解答（處理） 3. 咱們班有個同學(xué)被欺負(fù)了(出事了) 去給他報仇（處理） 在JS中的事件是: 用戶在頁面上操作, 然后我們要調(diào)用函數(shù)來處理. 比如: 1. 點(diǎn)擊了登錄按鈕, 調(diào)用登錄函數(shù)執(zhí)行登錄操作 2. 鼠標(biāo)拖拽, 調(diào)用函數(shù)實(shí)現(xiàn)拖拽 事件觸發(fā)： 用戶在頁面上操作(如點(diǎn)擊按鈕, 鼠標(biāo)滑過, 鼠標(biāo)點(diǎn)擊, 鼠標(biāo)松開, 文本框獲得焦點(diǎn), 失去焦點(diǎn)等), 就是事件觸發(fā).事件的概念2. 事件的模式 JavaScript

2、有兩種事件實(shí)現(xiàn)模式: 內(nèi)聯(lián)模式, 腳本模式.內(nèi)聯(lián)模式 : 直接在HTML標(biāo)簽中添加事件. 這種模型是最傳統(tǒng)簡單的一種處理事件的方法。但是這種模式中事件和HTML是混寫的, 并沒有將JS與HTML分離, 當(dāng)代碼量多了以后,對后期代碼維護(hù)和擴(kuò)展很不利. 例如: 注意: 單雙引號/執(zhí)行自定義的JS函數(shù) 注意: 內(nèi)聯(lián)模式調(diào)用的函數(shù)不能放到window.onload里面, 否則會找不到該函數(shù).事件的概念腳本模式: 腳本模式能將JS代碼和HTML代碼分離, 符合代碼規(guī)范. 使用腳本模式我們需要先獲取到元素節(jié)點(diǎn)對象, 再針對該節(jié)點(diǎn)對象添加事件; 如我們可以采用三種方式來獲得節(jié)點(diǎn)對象: getElementB

3、yId(), getElementsByTagName(), getElementsByName()例如: var box = document.getElementById(box); 添加事件方式一 : 通過匿名函數(shù)，可以直接觸發(fā)對應(yīng)的代碼 (推薦)box.onclick = function() /給box節(jié)點(diǎn)對象添加點(diǎn)擊事件onclick console.log(Hello world!); ;添加事件方式二 : 通過指定的函數(shù)名賦值的方式 來執(zhí)行函數(shù)box.onclick = func; /注意這里不能寫成func()function func() /給box節(jié)點(diǎn)對象添加點(diǎn)擊事件on

4、click console.log(Hello world!); ;事件的概念完整事件由三個部分組成： 1. 觸發(fā)事件的元素節(jié)點(diǎn)對象 2. 事件處理函數(shù) 3. 事件執(zhí)行函數(shù)例如：單擊文檔任意處。 document.onclick = function() console.log(單擊了文檔頁面的某一個地方); ;在上面的程序中： document : 是觸發(fā)事件的對象, 表示觸發(fā)事件的元素所在區(qū)域;onclick : 表示一個事件處理函數(shù)(on+事件類型click)function() : 匿名函數(shù)是被執(zhí)行的函數(shù), 用于觸發(fā)事件后執(zhí)行;所有的事件處理函數(shù)都會都有兩個部分組成，on+事件類型;

5、例如 : onclick事件處理函數(shù)就是由on加上click;注意: 事件處理函數(shù)一般都是小寫字母事件的組成事件的分類 JavaScript 可以處理的事件種類有三種：鼠標(biāo)事件, 鍵盤事件和 HTML事件.1. 鼠標(biāo)事件 鼠標(biāo)事件，頁面所有元素都可觸發(fā)鼠標(biāo)事件; click： 當(dāng)單擊鼠標(biāo)按鈕并在松開時觸發(fā) onclick = function() console.log(單擊了鼠標(biāo)); ; dblclick： 當(dāng)雙擊鼠標(biāo)按鈕時觸發(fā)。 ondblclick = function() console.log(雙擊了鼠標(biāo)); ; mousedown：當(dāng)按下了鼠標(biāo)還未松開時觸發(fā)。 onmousedow

6、n = function() console.log(按下鼠標(biāo)); ;事件的分類mouseup： 釋放鼠標(biāo)按鈕時觸發(fā)。 onmouseup = function() console.log(松開了鼠標(biāo)); ;mouseover：當(dāng)鼠標(biāo)移入某個元素的那一刻觸發(fā)。onmouseover = function() console.log(鼠標(biāo)移入了); ; mouseout：當(dāng)鼠標(biāo)剛移出某個元素的那一刻觸發(fā)。 onmouseout = function() console.log(鼠標(biāo)移出了); ; mousemove：當(dāng)鼠標(biāo)指針在某個元素上移動時觸發(fā)。onmousemove = function(

7、) console.log(鼠標(biāo)移動了); ; 事件的分類mouseenter：當(dāng)鼠標(biāo)移入某個元素的那一刻觸發(fā)。onmouseenter = function() console.log(鼠標(biāo)移入了); ; mouseleave：當(dāng)鼠標(biāo)剛移出某個元素的那一刻觸發(fā)。 onmouseleave = function() console.log(鼠標(biāo)移出了); ;mouseover和 mouseenter的區(qū)別是: mouseover: 元素的子元素移入也會觸發(fā)事件mouseenter : 元素的子元素移入不會觸發(fā)事件事件的分類在JS事件中, this表示觸發(fā)事件的元素節(jié)點(diǎn)對象;var box =

8、document.getElementById(box); box.onclick = function() console.log(this.nodeName); /this表示box對象 ;通過for循環(huán)添加事件, 使用thisvar aInput = document.getElementsByTagName(input);for (var i=0; iaInput.length; i+) aInputi.index = i; aInputi.onclick = function() console.log(this.index); ;循環(huán)中事件的下標(biāo)2. 鍵盤事件 鍵盤事件，在鍵盤上按

9、下鍵時觸發(fā)的事件; (一般由window對象或者document對象調(diào)用) keydown：當(dāng)用戶按下鍵盤上某個鍵觸發(fā)，如果按住不放，會重復(fù)觸發(fā)。 window.onkeydown = function() console.log(按下了鍵盤上的某個鍵); ; keypress：當(dāng)用戶按下鍵盤上的字符鍵觸發(fā)，如果按住不放，會重復(fù)觸發(fā) window.onkeypress = function() console.log(按下了鍵盤上的字符鍵); ; keyup：當(dāng)用戶釋放鍵盤上的某個鍵觸發(fā)。 window.onkeyup = function() console.log(松開鍵盤上的某個鍵);

10、;事件的分類3. HTML事件 HTML事件，跟HTML頁面相關(guān)的事件; load：當(dāng)頁面完全加載后觸發(fā) window.onload = function() console.log(頁面已經(jīng)加載完畢); ; unload：當(dāng)頁面完全卸載后觸發(fā) window.onunload = function() console.log(頁面已經(jīng)卸載完畢); ; select：當(dāng)用戶選擇文本框(input 或 textarea)中的內(nèi)容觸發(fā)。 input.onselect = function() console.log(選擇了文本框中的內(nèi)容); ; change：當(dāng)文本框(input 或 textare

11、a)內(nèi)容改變且失去焦點(diǎn)后觸發(fā)。 input.onchange = function() console.log(文本框中內(nèi)容改變了); ; 事件的分類focus：當(dāng)頁面或者元素獲得焦點(diǎn)時觸發(fā)。 input.onfocus = function() console.log(文本框獲得焦點(diǎn)); ;blur：當(dāng)頁面或元素失去焦點(diǎn)時觸發(fā)。input.onblur = function() console.log(文本框失去焦點(diǎn)); ;scroll：當(dāng)用戶滾動帶滾動條的元素時觸發(fā)。window.onscroll= function() console.log(滾動了滾動條了); ;事件的分類1. 事件對

12、象(event對象) 是什么? event對象是在觸發(fā)事件時, 瀏覽器會通過函數(shù)把事件對象作為參數(shù)傳遞過來, 在事件觸發(fā)執(zhí)行函數(shù)時一般會得到一個隱藏的參數(shù), box.onclick = function(evt) var e= evt /獲取到event對象(事件對象) console.log(e); ;事件對象(event)2. 事件對象的屬性button: 鼠標(biāo)按下了哪個鍵例如: document.onclick = function(evt) var e = evt ; console.log(e.button); ;事件對象(event)clientX: 瀏覽器可視區(qū)域的x坐標(biāo)clie

13、ntY: 瀏覽器可視區(qū)域的y坐標(biāo)pageX: 瀏覽器內(nèi)容區(qū)域的x坐標(biāo)pageY: 瀏覽器內(nèi)容區(qū)域的y坐標(biāo)screenX: 顯示器屏幕的x坐標(biāo)screenY: 顯示器屏幕的y坐標(biāo)offsetX: 鼠標(biāo)點(diǎn)擊的元素位置距離元素左邊界的x坐標(biāo)offsetY: 鼠標(biāo)點(diǎn)擊的元素位置距離元素上邊界的y坐標(biāo)例如: document.onmousedown= function(evt) var e = evt ; console.log(e.clientX + , + e.clientY); console.log(e.screenX + , + e.screenY); console.log(e.pageX

14、+ “,” + e.pageY);事件對象(event)3. 鍵盤事件的組合鍵 鍵盤上的某些鍵可以配合鼠標(biāo)來觸發(fā)一些特殊的事件. 如: Shfit, Ctrl, Alt.事件對象(event)鍵碼 : keyCode屬性 所有按鍵(包括功能鍵control, alt,shift, tab, 方向鍵等, 不包括亮度,音量.的按鍵)在發(fā)生 keydown和keyup 事件時，event對象的 keyCode屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應(yīng)。對數(shù)字字母字符集，keyCode屬性的值與 ASCII 碼中對應(yīng).document.onkeydown = function(evt) var e

15、 = evt ; console.log(e.keyCode); /按任意鍵，得到相應(yīng)的 keyCode ;注意: 大寫字母或小寫的編碼相同, 都為大寫字母。事件對象(event)字符編碼: charCode屬性 Firefox, Chrome和Safari的event對象支持charCode屬性, 只有按下字符鍵并且使用keypress事件時才會得到charCode, 這個charCode的值和UniCode碼對應(yīng), 和keyCode也類似, 但是charCode的字母區(qū)分大小寫. ( 字符鍵: 數(shù)字, 字母(區(qū)分大小寫), 字符, 空格, 回車 )document.onkeypress = function(evt) var e = evt ; console.log(e.charCode);注：可以使用 String.fromCharCode()將 Unicode 編碼轉(zhuǎn)換成實(shí)際的字符事件對象(event)1. 鼠標(biāo)點(diǎn)擊某處, 讓精靈移動到該處 (如下圖)2. 鼠標(biāo)移動時, 讓精靈跟隨鼠標(biāo)移動練習(xí)3. 練習(xí)制作如下圖效果: 當(dāng)鼠標(biāo)滑過小圖片時, 讓大圖片也顯示該圖 練習(xí)有一個紅色的d