事件

http://www.w3school.com.cn/jsref/dom_obj_event.asp

JavaScript與HTML之間的交互式通過事件實現(xiàn)的“呀椋可以用偵聽器（處理程序）來預定事件暑刃，在傳統(tǒng)軟件工程中被稱為觀察者模式的模型厢漩，支持頁面的行為和頁面的外觀之間的松散耦合。
IE事件流是事件冒泡流岩臣，而Netscape事件流是事件捕獲流溜嗜。(放心使用事件冒泡)

DOM2級事件 規(guī)定的事件流包括三個階段：事件捕獲階段宵膨、處于目標階段和事件冒泡階段。

DOM事件流.jpg

事件處理程序

函數(shù)體內(nèi)有局部變量event,可以直接訪問事件對象炸宵。不需要定義

<input type="button" value="Click Me" onclick="alert(event.type)" >

在函數(shù)內(nèi)部,this值等于事件的目標元素.

<input type="button" value="Click Me" onclick="alert(this.value)" >

在HTML中指定事件處理程序有兩個缺點

• 時差問題辟躏，HTML元素一出現(xiàn)就觸發(fā)相應的事件，而當時的事件處理程序有可能未具備執(zhí)行條件土全。
• 擴展事件處理程序的作用域鏈在不同瀏覽器會導致不同的結(jié)果捎琐。可能會在訪問非限定對象時出錯裹匙。
• 導致HTML與JavaScript代碼緊密耦合瑞凑。（更換事件處理程序要改動兩個地方）

DOM0級事件處理程序：

element.event = function(){}

DOM2級事件處理程序：

• addEventListener(event_name,handler,false)
  IE: attachEvent(event_name,handler)
• removeEventListener(event_name,handler,false) //傳入的handler決定了刪除哪一個handler綁定的事件
  IE: detachEvent(event_name,handler)

在IE使用attachEvent()作用于在全局作用域。this = window; 執(zhí)行時按添加的相反順序執(zhí)行概页。

在事件處理程序內(nèi)部涧衙，對象this始終等于 currentTarget 的值。target 只包含事件的實際目標奥此。看下面例子

document.body.onclick = function(event){
  alert(event.currentTarget === document.body); //true
  alert(this === document.body);  //true
  alert(event.tagget === document.getElementById("myBtn");  //true
}

點擊按鈕時 this 和 currentTarget 等于 document.body ,但 target 卻等于按鈕元素(事件的真正目標).

• 在需要通過一個函數(shù)處理多個事件時可以使用type屬性.(event.type 返回事件對象類型)
• 阻止特定事件的默認行為雁比，可以使用preventDefault()方法.(當cancelable == true)
• stopPropagation()方法用于立即停止事件在DOM層次的傳播（取消冒泡或者捕獲）

IE中的事件對象

• 使用DOM0級方法添加事件處理程序時稚虎，event對象作為window對象的一個屬性存在。

var btn = document.getElement("myBtn");

btn.onclick = function(){
    var event = window.event;
    alert(event.type);  //click
}

btn.attachEvent("onclick",  function(event){
      alert(event.type);
});

• 事件處理程序的作用域是根據(jù)指定它的方式確定的寻拂，所以不能認為this會始終等于事件目標。故而丈牢，最好還是使用event.srcElement比較保險.
• returnValue屬性相當于DOM中的preventDefault()方法.它們的作用都是取消給定事件的默認行為祭钉。只要將該屬性設置為false就能組織默認行為。
• cancelBubble屬性與DOM中的stopPropagation()方法作用相同己沛，用來停止事件冒泡的慌核。IE只能取消事件冒泡距境。通過將cancelBubble設置為true,就可阻止事件通過冒泡而觸發(fā)的處理程序。
  s

事件類型

DOM3級事件規(guī)定了以下幾類事件:

• UI
• 焦點
• 鼠標
• 滾輪
• 文本
• 鍵盤
• 合成（IME 輸入法）
• 變動（底層DOM結(jié)構(gòu)發(fā)生變化觸發(fā)）
• 變動名稱事件

UI事件

• load : 當頁面完全加載后在window上面觸發(fā)垮卓，當所有框架都加載完畢時在框架集上面觸發(fā)垫桂，當圖像加載完畢時在<img>元素上面觸發(fā)∷诎矗或者當嵌入的內(nèi)容加載完畢時在元素上面觸發(fā)诬滩。
• unload：當頁面完全卸載后在window上面觸發(fā)，當所有框架都卸載后在框架集上面觸發(fā)灭将，或者當嵌入的內(nèi)容卸載完畢后在元素上面觸發(fā)疼鸟。
• abort：當用戶停止下載過程嵌入內(nèi)容沒有加載完觸發(fā)。
• error : 當發(fā)生JavasScript錯誤時在window上面觸發(fā)宗侦，當無法加載圖片時在<img>元素上面觸發(fā)愚臀，當元素加載嵌入內(nèi)容時在元素上面觸發(fā)，或者當有一或多個框架無法加載時在框架集上面觸發(fā)矾利。
• select : 當用戶選擇文本框( or )中的一個可多個字符時觸發(fā)姑裂。
• resize : 當窗口或框架的大小變化時在window或框架上面觸發(fā)；
• scroll：當用戶流動帶有流動條的元素中的內(nèi)容時男旗，在該元素上面觸發(fā)舶斧。元素中包含所加載頁面的流動條。

焦點事件

• blur：失去焦點時觸發(fā)察皇，這個事件不會冒泡
• focus：獲得焦點時觸發(fā)茴厉，不冒泡
• focusin：在獲得焦點時觸發(fā)，但他冒泡什荣，DOM3新增
• focusout：在失去焦點時觸發(fā)矾缓，冒泡

鼠標及滾輪事件

• click：在單擊主鼠標按鈕（一般是左鍵）或者按下回車時觸發(fā)；這意味著onclick事件處理程序既可以通過鼠標也可以通過鍵盤執(zhí)行稻爬。
• dbclick：雙擊主鼠標按鈕（一般是左鍵）或者按下回車鍵時觸發(fā)嗜闻。
• mousedown：按下任意鼠標按鈕時觸發(fā)；不能通過鍵盤觸發(fā)桅锄。
• mouseup：釋放鼠標按鈕時觸發(fā)琉雳；不能通過鍵盤觸發(fā)。
• mouseenter：在鼠標光標從元素外部首次移動到元素范圍之內(nèi)時觸發(fā)友瘤；這個事件不冒泡翠肘，而且光標移動到元素的后代元素上不會觸發(fā)；IE辫秧、Firefox9+和Opera支持這個事件束倍。
• mouseleave：在鼠標光標從元素上方移動到元素范圍之外時觸發(fā)；這個事件不冒泡，而且光標移動到元素的后代元素上不會觸發(fā)肌幽；IE晚碾、Firefox9+和Opera支持這個事件。
• mousemove：在鼠標光標在元素內(nèi)部移動時重復地觸發(fā)喂急；不能通過鍵盤觸發(fā)格嘁。
• mouseout：在鼠標位于一個元素上方，然后移動到另一個元素時觸發(fā)廊移，另一個元素可以是這個元素的子元素糕簿；不能通過鍵盤觸發(fā)。
• mouseover：在鼠標位于一個元素外部狡孔，然后將其首次移動到另一個元素邊界之內(nèi)時觸發(fā)懂诗；不能通過鍵盤觸發(fā)。

• （客戶區(qū)坐標）鼠標事件位置信息保存在事件對象中的clientX和clientY屬性中.
• （頁面坐標位置）事件對象pageX和pageY屬性表示鼠標光標在頁面中的位置苗膝，坐標運算從頁面本身而非是視口的左邊和頂邊計算的殃恒。
• screenX 和 screenY 屬性確定鼠標事件發(fā)生時鼠標指針相對于整個屏幕的坐標信息。（相對于電腦屏幕的位置）
• 修改鍵狀態(tài)屬性（判斷是否按下）:shiftKey辱揭、ctrlKey离唐、altKey、metaKey(在windows是windows鍵问窃，在蘋果機是cmd鍵);
• 對于mousedown和mouseup事件來說亥鬓，在其event對象存在一個button屬性。（0:主鼠標按鈕域庇，1:中間鼠標按鈕嵌戈，2:次鼠標按鈕）
• 鼠標滾輪事件：mousewheel,返回值中的wheelDelta正負代表滾輪的方向。(Opera 9.5以前的版本正負號是顛倒的)

鍵盤與文本事件

• keydown
• keypress
• keyup

• 只有一個文本事件：textInput,可以用于攔截文本听皿。（在文本輸入文本框之前會觸發(fā)該事件）熟呛。
• event 對象上還有一個屬性：inputMethod,返回值是文本輸入到文本框中的方式。

復合事件（用于處理IME輸入序列）

• compositionstart：要開始輸入
• compositionupdate：插入新字符
• compositionend：復合系統(tǒng)關(guān)閉尉姨，返回正常鍵盤輸入狀態(tài)

event.data 屬性：

• compositionstart時訪問data：正在編輯的文本惰拱；
• compositionupdate時訪問data：正插入的新字符；
• compositionend時訪問data：插入的所有字符啊送；

變動事件（貌似作廢了很多變動事件，跨瀏覽器不好欣孤，不建議用）

• DOMNodeInserted：在一個節(jié)點作為子節(jié)點被插入到另一個節(jié)點中時馋没；
• DOMNodeRemoved：在節(jié)點從其父節(jié)點中被移除時；
  其中(event.target)是被刪除的節(jié)點降传，由于觸發(fā)時節(jié)點尚未從其父節(jié)點刪除篷朵，因此其parentNode屬性仍然指向父節(jié)點.(和event.relatedNode相同,包含對目標節(jié)點父節(jié)點的引用).
• DOMNodeInsertedIntoDocument：在一個節(jié)點被直接插入文檔，或通過子樹間接插入文檔之后觸發(fā)。這個事件在DOMNodeInserted之后觸發(fā)声旺；
• DOMNodeRemovedFromDocument：在一個節(jié)點被直接從文檔中移除笔链，或通過子樹間接從文檔中移除之前觸發(fā)。這個事件在DOMNodeRemoved之后觸發(fā)腮猖；
• DOMSubtreeModified：在DOM結(jié)構(gòu)中發(fā)生任何變化時觸發(fā)鉴扫；
• DOMAttrModified：在特性被修改之后觸發(fā)；
• DOMCharacterDataModified：在文本節(jié)點的值發(fā)生變化時觸發(fā)澈缺；

HTML5事件

• contentmenu : 右鍵調(diào)出上下文菜單事件坪创，在兼容DOM的瀏覽器中，可以使用event.preventDafault()阻止元素發(fā)生的默認行為姐赡。IE將event.returnValue值設為false;
• beforeunload: 頁面卸載前的事件莱预。這個事件會在瀏覽器卸載頁面之前觸發(fā)。

EventUtil.addHandler(window, "beforeunload", function(event){
       event = EventUtil.getEvent(event);
       var message = "I'm GGG";
       event.returnValue = message;
      return message;
}

• DOMContentLoaded 事件 (IE:readystatechange 事件)
  window 的 load 事件會在頁面的一切都加載完畢時觸發(fā)项滑。而DOMContentLoaded事件則在形成完整的DOM樹之后就會觸發(fā)依沮，不會理會圖像、JavaScript文件枪狂、CSS文件或其他資源是否已經(jīng)下載完畢危喉。
• pageshow 和 pagehide 事件
  Firefox 和 Opera有個特性：往返緩存，如果頁面位于bfcache中摘完，那么再次打開該頁面就不會觸發(fā)load事件.
• hashchange事件
  在URL的參數(shù)列表（以及URL中#號后面的所有字符串）發(fā)生變化時通知姥饰。
  此時event對象包含兩個額外屬性: oldURL 和 newURL

設備事件

• orientationchange 事件(Safari)
  當設備改變縱向或橫向時觸發(fā)事件。
  事件的值可以通過window.orientation 的返回值判斷孝治。 (0:肖像模式列粪，-90表示向右旋轉(zhuǎn)的橫向模式,90表示向左旋轉(zhuǎn)的橫向模式，180表示頭朝下）
• MozOrientation 事件
  Firefox 為檢測設備的方向引入了一個名為MozOrientation的新事件（非標準）該事件只能提供一個平面的方向變化谈飒。
  事件內(nèi)event對象包含三個屬性：x岂座、y、z,值都介于1到-1之間杭措，表示不同設備坐標軸上的方向费什。
  x為向左傾斜的值，向右會減少手素。y為向接近用戶的方向傾斜的值鸳址，z檢測垂直加速度，1表示靜止不動泉懦，0為失重稿黍。
• deviceorientation 事件
  和MozOrientation 類似.但意圖是告訴開發(fā)人員設備在空間中朝向哪兒。
  事件對象包含以下五個屬性：
  • alpha : 在圍繞z軸旋轉(zhuǎn)（左右）崩哩，y軸的度數(shù)差巡球；是一個介于0到360之間的浮點數(shù)言沐。
  • beta : 在圍繞x軸旋轉(zhuǎn)（前后），z軸的度數(shù)差酣栈；是一個介于-180到180之間的浮點數(shù)险胰。
  • gamma : 在圍繞y軸旋轉(zhuǎn)（扭轉(zhuǎn)），z軸的度數(shù)差矿筝；是一個介于-90到90之間的浮點數(shù)起便。
  • absolute : 布爾值，表示設備是否返回一個絕對值跋涣。
  • compassCalibrated : 布爾值缨睡，表示設備的指南針是否校準過。

方向圖.jpg

• devicemotion 事件
  這個事件告訴開發(fā)人員設備什么時候移動陈辱，檢測設備是不是往下掉或者被走著的人拿在手里
  • acceleration : 一個包含x,y,z屬性的對象奖年，不考慮重力的情況下告訴你在每個方向上的加速度。
  • accelerationIncludingGravity : 一個包含x,y,z屬性的對象沛贪，在考慮z軸自然重力加速度的情況下告訴你每個方向上的加速度陋守。
  • interval : 以毫秒表示的時間值，必須在另一個devicemotion事件觸發(fā)前傳入利赋。
  • rotationRate : 一個包含表示方向的alpha水评、beta和gamma屬性的對象
    如果讀取不了他們值就會返回null,所以使用屬性先檢測他們的值不是null.

觸摸和手勢事件

觸碰事件

• touchstart : 當手指觸摸屏幕時出發(fā)。即使已經(jīng)有一個手指放在了屏幕上也會觸發(fā)媚送。
• touchmove : 當手指在屏幕上滑動時連續(xù)觸發(fā)中燥。在事件期間可以調(diào)用preventDefault()來阻止?jié)L動。
• touchend : 當手指從屏幕上移開時觸發(fā)塘偎。
• touchcancel : 當系統(tǒng)停止跟蹤觸摸時觸發(fā)疗涉。
  觸摸事件不僅提供了鼠標事件常見的屬性，還包含下列三個用于跟蹤觸摸的屬性
  • touches : 表示當前跟蹤觸摸操作的Touch對象數(shù)組.
  • targetTouchs : 特定于事件目標的Touch對象數(shù)組.
  • changeTouches : 表示自上次觸摸以來發(fā)生了什么改變的Touch對象數(shù)組吟秩。
    每個Touch對象包括下列屬性：
    • clientX咱扣、clientY 、identifier(標識觸摸的唯一ID)涵防、pageX闹伪、pageY、screenX壮池、screenY偏瓤、target(觸摸的DOM節(jié)點目標)

手勢事件

當兩個手指觸碰屏幕時就會產(chǎn)生手勢。

• gesturestart : 當一個手指已經(jīng)俺在屏幕上而另一個手指又觸碰屏幕時觸發(fā)椰憋。
• gesturechange : 當觸摸屏幕的任何一個手指的位置發(fā)生變化時觸發(fā)硼补。
• gestureend : 當任何一個手指從屏幕上面移開時觸發(fā)。
  每個手勢事件對象包含標準鼠標事件屬性外熏矿，還另外包含兩個額外的屬性：rotation和scale,rotation 表示手指變化引起的旋轉(zhuǎn)角度, scale屬性表示兩個手指間距離的變化情況。

內(nèi)存和性能

在JavaScript中，添加到頁面上的事件處理程序數(shù)量將直接關(guān)系到頁面的整體運行性能票编。
對“事件處理程序過多”問題的解決方案就是事件委托(在同一個委托函數(shù)中對id進行分類并分別處理)褪储。

使用事件委托好處是：

• document對象很快就可以訪問，而且可以在頁面生命周期的任何時點上為它添加事件處理程序（無需等待DOMContentLoaded或load事件）慧域。換句話說鲤竹，只要可點擊的元素呈現(xiàn)在頁面上，就可以立即具備適當?shù)墓δ堋?/li>
• 在頁面中設置事件處理程序所需的時間更少昔榴。只添加一個事件處理程序所需的DOM引用更少辛藻，所花的時間也更少。
• 整個頁面占用的內(nèi)存空間更少互订，能夠提升整體性能吱肌。

使用removeChild()、replaceChild()或innerHTML()時仰禽，要先將元素事件處理程序移除掉氮墨，避免無法回收。
另一種情況就是卸載頁面的時候吐葵。IE8或更早版本在這種情況下是問題最多的瀏覽器规揪。如果在頁面被卸載時沒有清理干凈事件處理程序有可能會滯留在內(nèi)存中。

模擬事件

可以在document對象上使用createEvent()方法創(chuàng)建event對象.接受一個參數(shù),即表示要創(chuàng)建的事件類型的字符串温峭。這個字符串可以是下列幾個字符串之一猛铅。（DOM2為英文復數(shù)形式，DOM3為單數(shù)）

• UIEvents: 一般化的UI事件凤藏，鼠標事件和鍵盤事件都繼承自UI事件奸忽。
• MouseEvents: 一般化的鼠標事件。
• MutationEvents: 一般化的DOM變動事件清笨。
• HTMLEvents: 一般化的HTML事件月杉。

表單腳本

在HTML中，表單是由<form>元素來表示的抠艾。而在JavaScript中苛萎，表單對應的則是HTMLFormElement類型。

HTMLFormElement有它自己下列獨有的屬性和方法：

• acceptCharset : 服務器能夠處理的字符集检号，等價于HTML中的accept-charset特性腌歉。
• action : 接受請求的URL；等價于HTML中的action特性齐苛。
• elements : 表單中所有控件的集合（HTMLCollection）翘盖。
• enctype : 請求的編碼類型；等價于HTML中的enctype特性凹蜂。
• length : 表單中控件數(shù)量
• name : 表單的名稱馍驯，等價于HTML的name特性阁危。
• reset() : 將所有表單域重置為默認值。
• submit() : 提交表單汰瘫。
• target : 用于發(fā)送請求和接受響應的窗口名稱狂打；等價于HTML的target特性。

注意事項:

1. 提交表單混弥，只要將其type特性的值設置為submit即可趴乡。
2. 用這種方式提交表單時，瀏覽器會將請求發(fā)送給服務器之前觸發(fā)submit事件蝗拿，這樣的話我們就有機會去驗證表單事件晾捏，阻止這個事件的默認行為就可以取消表單提交。(preventDefault())
3. 在表單中使用form.submit()也可以提交表單哀托，但不會觸發(fā)submit事件惦辛。
4. 調(diào)用reset()方法和type設置為reset可以用來重置表單.

所有表單字段都擁有相同一組屬性：

• disabled、form萤捆、name裙品、readOnly、tabIndex俗或、type市怎、value

文本框腳本

• <textarea>元素呈現(xiàn)多行文本框，指定文本框的大小可以使用rows和cols特性.
• 在文本框中選擇字符會觸發(fā)select()事件辛慰，其中的兩個屬性selectionStart和selectionEnd表示所選擇字符文本的范圍区匠。(IE使用document.selection對象).
• 選擇部分文本的方法 text.setSelectionRange(firstCharIndex,lastCharIndex)(IE使用createTextRange()、moveStart()帅腌、moveEnd())
• 過濾輸入在keypress中獲取字符編碼并用preventDefault()進行過濾.(注意不要屏蔽一些功能鍵驰弄，不要屏蔽字符編碼小于10和ctrl鍵event.ctrlKey)
• 剪貼板

  6個剪貼板事件

  • beforecopy、copy速客、beforecut戚篙、cut、beforepaste溺职、paste
    訪問剪貼板數(shù)據(jù)可以使用clipboardData

HTML5約束驗證API

JS被禁用時可以通過這些讓瀏覽器根據(jù)標記規(guī)則執(zhí)行驗證岔擂，然后自己顯示適當?shù)腻e誤信息。

• required 必填字段
• pattern 正則表達式屬性
• JS代碼中可以通過使用checkValidity()方法檢測表單某個字段是否有效（根據(jù)上面列舉的約束浪耘。）
• validity屬性會告訴你哪些字段有效或者無效乱灵。這個對象包含一系列屬性，每個屬性都會返回一個布爾值七冲。
• novalidate 屬性禁用驗證

選擇框腳本

HTMLSelectElement

• add(newOption,relOption) : 向控件插入新的<option> 元素痛倚，其位置在相關(guān)項之前.
• multiple : 布爾值，表示是否允許多項選擇澜躺；等價于HTML的multiple特性蝉稳。
• options : 控件中所有<option>元素的HTMLCollection抒蚜。
• remove(index) : 移除給定位置的選項。
• selectedIndex : 基于0的選中項的索引颠区，如果沒有選中項削锰，則值為-1。對于支持多選的控件毕莱，只保存選中項中第一項的索引。
• size : 選擇框中可見的行數(shù)颅夺；等價于HTML中的size特性朋截。

HTMLOptionElement

• index : 當前選項在options集合中的索引
• label : 當前選項的標簽；等價于HTML中的label特性
• selected : 布爾值吧黄，表示當前選項是否被選中部服。將這個屬性設置為true可以選中當前選項。
• text : 選項的文本拗慨。
• value : 選項的值（等價于HTML中的value特性）

https://www.jb51.net/article/99094.htm