資訊專欄INFORMATION COLUMN
摘要：使用來移除事件，參數(shù)必須與要移除的事件處理函數(shù)地址指針相同。在低版本瀏覽器中，綁定級事件的方法為中的級事件的事件處理程序都是在冒泡階段執(zhí)行的。
JavaScript中幾個最重要的大知識點
面向?qū)ο?/p>
DOM事件
異步交互ajax
事件事件就是文檔和瀏覽器的瞬間交互行為
點擊: click
滾輪: scroll
滑動: move
進入: enter
加載: load
事件的監(jiān)聽(事件的綁定)
通過on+事件名 這種類型綁定的事件都叫做DOM0級事件
DOM0級事件，同一個元素的同一個事件監(jiān)聽，綁定的觸發(fā)運行函數(shù)，不能重復綁定，有且只能綁定一回，下一次綁定的會將上一次的給覆蓋掉
事件設為null，移除事件的監(jiān)聽
監(jiān)聽事件，不僅是瀏覽器的一種機制，也是瀏覽器賦予DOM文檔元素的屬性，即事件的監(jiān)聽是時刻存在的，但是事件觸發(fā)時候運行的處理函數(shù)，是我們自己定義的
事件的觸發(fā)：觸發(fā)事件時候運行綁定的處理函數(shù)
JS中的事件，其實是以一個類的形式存在的，每個綁定的事件其實都是這個類的一個實例 (引用數(shù)據(jù)類型的對象) ，瀏覽器會給我們的所有的事件觸發(fā)函數(shù)中，默認傳入一個實參，就是當前事件的事件對象(event)，在這個事件對象中，保存著當前事件所有信息
事件對象存在于所有的事件的觸發(fā)處理函數(shù)中，事件對象中有一些常用的屬性，用于控制交互中的效果。
clientX/clientY：鼠標點擊點對應屏幕左上角的位置信息
pageX/pageY：鼠標點擊的點對應body左上角的位置信息
keyCode：鍵盤事件中鍵盤對應的鍵盤碼
Backspace： keyCode:8 刪除鍵
enter： keyCode：13 回車鍵
space： keyCode：32 空格鍵
arrowLeft/Up/Right/Down： keyCode：37 / 38 / 39 / 40 小鍵盤左 / 上 / 右 / 下
事件對象還存在一些兼容性：在標準瀏覽器下他的事件對象存在于當前函數(shù)的作用域中，而在ie中存在于window作用域下。
//處理事件對象的兼容性寫法 event=event|| window.event; //處理事件源的兼容性寫法 event.target || event.srcElement //處理事件冒泡的兼容性寫法 event.stopPropagation() || event.cancelBubble=true; //阻止默認行為的兼容寫法 event.preventDefault() || event.returnValue=false;
有時候我們需要對一個DOM元素下的多個子元素綁定相同的事件，比如說為表格添加可刪除一行的功能，一般的方法是循環(huán)綁定事件，但是這樣的辦法顯然性能不高，這時候就可以只為其父元素綁定事件，通過事件委托來實現(xiàn)其多個子元素的相同事件效果。
事件委托的原理為：根據(jù)事件流的傳播機制，我們在父級標簽上監(jiān)聽事件，通過捕獲和冒泡機制，在觸發(fā)子集的事件的時候，冒泡傳播給父級，來觸發(fā)父級的事件處理函數(shù)
那么什么是事件得出傳播機制呢？總的來說可以把事件流的傳播機制分為兩到三個階段：
事件捕獲階段：從DOM最外層標簽HTML開始往子元素捕獲事件源
捕獲到事件對象（可以歸到第一階段）
冒泡傳播：從捕獲到事件源的元素開始往父級元素進行事件冒泡，DOM0級事件中，事件綁定函數(shù)的觸發(fā)都發(fā)生在冒泡階段
DOM2級事件DOM2級事件就是DOM0級事件的優(yōu)化，同一個文檔對象同一個事件，可以綁定多個事件處理程序，還可以控制事件處理程序的執(zhí)行階段在捕獲或者冒泡階段執(zhí)行。
1.在標準瀏覽器中，綁定DOM2級事件的方法為：addEventListener()
第一個參數(shù)為事件類型：[String] click / mouseover / blur ...
第二個參數(shù)為事件處理函數(shù)：[Function] listener
第三個參數(shù)為事件處理函數(shù)是否在冒泡階段執(zhí)行：[Boolean] ture/false
如果直接觸發(fā)的是事件源的監(jiān)聽事件，沒有事件委托的情況下，則冒泡和捕獲會同時發(fā)生，此時會根據(jù)函數(shù)的書寫先后順序執(zhí)行事件處理程序
事件綁定函數(shù)中的this指向當前綁定事件的DOM對象，this還等于currentTarget。
使用 removeEventListener() 來移除事件，參數(shù)必須與要移除的事件處理函數(shù)地址指針相同。
2.在低版本IE瀏覽器（6-8）中，綁定DOM2級事件的方法為：attachEvent()
IE中的DOM2級事件的事件處理程序,都是在冒泡階段執(zhí)行的。
第一個參數(shù)為事件類型：[String] onclick / onmouseover / onblur ...
第二個參數(shù)為事件處理程序：：[Function] listener
IE下DOM2級事件的處理函數(shù)是綁定在全局(window)下,所以其內(nèi)部this指向window，IE下DOM二級事件還存在重復執(zhí)行多次相同的處理函數(shù)和函數(shù)執(zhí)行亂序的問題，可以用 訂閱 - 發(fā)布 模式解決這些兼容性問題。
使用detachEvent()來移除事件，參數(shù)同樣必須與要移除的事件地址指針相同
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/83671.html
摘要：中幾個最重要的大知識點面向?qū)ο笫录惒浇换ッ嫦驅(qū)ο笤谥锌梢园讶我獾囊煤妥兞慷伎闯墒且粋€對象。我們可以寫一個通用方法來模擬面向?qū)ο笳Z言的多態(tài) JavaScript中幾個最重要的大知識點 面向?qū)ο?DOM事件 異步交互ajax 面向?qū)ο?在JS中可以把任意的引用和變量都看成是一個對象。面向?qū)ο蟮闹饕齻€表現(xiàn)形式： 封裝 繼承 多態(tài) 1. 封裝 1.1 單例模式 var obj={...
摘要：與響應不同的是，身份驗證并不能提供任何幫助，而且這個請求也不應該被重復提交。 JavaScript中幾個最重要的大知識點 面向?qū)ο?DOM事件 異步交互ajax AJAX AJAX是異步的javascript和xml（Asynchronous Javascript And XML）的縮寫，用于網(wǎng)頁局部刷新，提升用戶瀏覽體驗 通常前端程序員關(guān)于AJAX的掌握僅僅停留在會用AJAX發(fā)送...
摘要：前端日報精選我是如何實現(xiàn)的在線升級熱更新功能的張鑫旭鑫空間鑫生活翻譯表單的運用第期晉升評審的套路異步編程的四種方式黃博客精選組件設計和分解思考掘金中文譯使登錄頁面變得正確掘金前端從強制開啟壓縮探究插件運行機制掘金個常用的簡 2017-06-28 前端日報 精選 我是如何實現(xiàn)electron的在線升級熱更新功能的？ ? 張鑫旭-鑫空間-鑫生活【翻譯】React 表單： Refs 的運用【...
摘要：這里借鑒了一下的處理方式，我們把單獨模塊的包裝成一個函數(shù)，提供一個全局的回調(diào)方法，加載完成時候再調(diào)用回調(diào)函數(shù)。 感謝本文引用鏈接的各位大佬們，小菜鳥我只是個搬運工 1.談一談你理解的vue是什么樣子的？ vue是數(shù)據(jù)、視圖分離的一個框架，讓數(shù)據(jù)與視圖間不會發(fā)生直接聯(lián)系。MVVM 組件化：把整體拆分為各個可以復用的個體 數(shù)據(jù)驅(qū)動：通過數(shù)據(jù)變化直接影響bom展示，避免dom操作。 可以在...
閱讀 2201·2021-11-22 15:24
閱讀 2560·2021-09-09 11:53
閱讀 3117·2021-09-04 16:40
閱讀 1696·2019-08-30 15:52
閱讀 3420·2019-08-29 13:47
閱讀 2799·2019-08-26 17:40
閱讀 1636·2019-08-26 13:24
閱讀 2306·2019-08-26 12:01
