第五章事件處理

JavaScript程序設(shè)計(jì)與應(yīng)用事件處理目

錄事件處理方式事件對(duì)象事件處理高級(jí)應(yīng)用事件概述目

錄事件處理方式事件對(duì)象事件處理高級(jí)應(yīng)用事件概述一、什么是事件事件概述

事件是指用戶載入目標(biāo)頁(yè)面直到該頁(yè)面被關(guān)閉期間瀏覽器的動(dòng)作及該頁(yè)面對(duì)用戶操作的響應(yīng)。二、事件三要素1、事件源（瀏覽器或頁(yè)面元素)：瀏覽器、body、p等。2、事件觸發(fā)類型（動(dòng)作）:瀏覽器事件如瀏覽器載入文檔事件onload、關(guān)閉該文檔事件onunload、瀏覽器失去焦點(diǎn)事件onblur、獲得焦點(diǎn)事件onfocus等。HTML元素事件如點(diǎn)擊按鈕、拖動(dòng)圖片等。3、事件處理程序（響應(yīng)）:事件處理器是與特定的文本和特定的事件相聯(lián)系的JavaScript腳本代碼，當(dāng)該文本發(fā)生改變或者事件被觸發(fā)時(shí)，瀏覽器執(zhí)行該代碼并進(jìn)行相應(yīng)的處理操作，而響應(yīng)某個(gè)事件而進(jìn)行的處理過(guò)程稱為事件處理。目

錄事件處理方式事件對(duì)象事件處理高級(jí)應(yīng)用事件概述一、注冊(cè)事件方式內(nèi)置函數(shù)事件處理方式給元素添加事件稱為注冊(cè)事件或綁定事件，注冊(cè)事件有兩種方式：傳統(tǒng)方式和綁定事件偵聽(tīng)器1、傳統(tǒng)方式利用on開頭的事件onclick缺點(diǎn)：同一個(gè)元素同一個(gè)事件只能設(shè)置一個(gè)處理函數(shù)，最后注冊(cè)的處理函數(shù)將會(huì)覆蓋前面注冊(cè)的處理函數(shù)。2、綁定事件偵聽(tīng)器利用addEventListener(type，listener[,useCapture)方法注冊(cè)事件。type:不帶on的事件類型字符串，例如click、mouseover等;listener：事件處理程序，事件發(fā)生時(shí)會(huì)調(diào)用該監(jiān)聽(tīng)函數(shù);useCapture：可選參數(shù)，是一個(gè)布爾值，默認(rèn)為falseW3C標(biāo)準(zhǔn)推薦方式IE9之前不支持這個(gè)方法，可以使用attachEvent（）代替特點(diǎn)：同一個(gè)元素同一個(gè)事件可以注冊(cè)多個(gè)監(jiān)聽(tīng)器，按注冊(cè)順序依次執(zhí)行。二、刪除事件方式內(nèi)置函數(shù)事件處理方式1、傳統(tǒng)注冊(cè)方式eventTarget.onclick=null;2、綁定事件偵聽(tīng)器的方式eventTarget.removeEventListener(type，listener)；目

錄事件處理方式事件對(duì)象事件處理高級(jí)應(yīng)用事件概述一、什么是事件對(duì)象內(nèi)置函數(shù)事件對(duì)象

注冊(cè)事件時(shí)系統(tǒng)自動(dòng)生成的一個(gè)包含事件相關(guān)的一系列信息數(shù)據(jù)的集合，它會(huì)傳遞給事件處理程序。同時(shí)，這個(gè)對(duì)象有很多屬性和方法。鼠標(biāo)觸發(fā)事件的得到的是鼠標(biāo)的相關(guān)信息，鍵盤觸發(fā)事件得到的是鍵盤的相關(guān)信息。二、使用事件對(duì)象

eventTarget.onclick=function(event){}eventTarget.addEventListener(‘click’,function(event){}//event:事件對(duì)象，可以自己命名，通常命名為event、e、evt三、事件對(duì)象的常見(jiàn)屬性和方法內(nèi)置函數(shù)事件對(duì)象四、鼠標(biāo)事件對(duì)象內(nèi)置函數(shù)事件對(duì)象內(nèi)置函數(shù)事件對(duì)象五、鍵盤事件的常用方法目

錄事件處理方式事件對(duì)象事件處理高級(jí)應(yīng)用事件概述一、DOM事件流內(nèi)置函數(shù)事件處理高級(jí)應(yīng)用1、事件流指的是頁(yè)面中事件接收的順序。2、事件發(fā)生時(shí)會(huì)在元素節(jié)點(diǎn)之間按照特定的順序傳播，這個(gè)傳播的過(guò)程即使DOM事件流捕獲階段(從根節(jié)點(diǎn)開始順著目標(biāo)節(jié)點(diǎn)構(gòu)建一條事件路徑，即事件由頁(yè)面元素接收，逐級(jí)向下，到具體的元素)目標(biāo)階段(到達(dá)目標(biāo)節(jié)點(diǎn)，即元素本身)冒泡階段(從目標(biāo)節(jié)點(diǎn)順著捕獲階段構(gòu)建的路徑回去，即跟捕獲相反具體元素本身，逐級(jí)向上，到頁(yè)面元素)內(nèi)置函數(shù)事件處理高級(jí)應(yīng)用3、事件流中的注意事項(xiàng)JavaScript代碼中只能執(zhí)行捕獲或者冒泡的一個(gè)階段傳統(tǒng)綁定方式和IE早期瀏覽器只支持冒泡addEventListen()方法的第三個(gè)參數(shù)是布爾值，true表示事件在捕獲階段調(diào)用事件處理程序，false則在冒泡階段調(diào)用事件處理程序。實(shí)際開發(fā)中很少使用事件捕獲，后面會(huì)講到冒泡的應(yīng)用有些事件沒(méi)有冒泡，例如onblur、onfoucs等二、事件委托內(nèi)置函數(shù)事件處理高級(jí)應(yīng)用

有時(shí)候需要綁定的子節(jié)點(diǎn)很多，一個(gè)個(gè)地添加事件處理非常繁瑣，這時(shí)可以將事件綁定在這些