国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript中幾個重要的知識點（2） ---- DOM事件

dantezhao / 520人閱讀

摘要：使用來移除事件，參數必須與要移除的事件處理函數地址指針相同。在低版本瀏覽器中，綁定級事件的方法為中的級事件的事件處理程序都是在冒泡階段執行的。

JavaScript中幾個最重要的大知識點

面向對象

DOM事件

異步交互ajax

事件 
事件就是文檔和瀏覽器的瞬間交互行為
1.事件類型

點擊: click

滾輪: scroll

滑動: move

進入: enter

加載: load

2.事件機制

事件的監聽(事件的綁定)

通過on+事件名 這種類型綁定的事件都叫做DOM0級事件

DOM0級事件，同一個元素的同一個事件監聽，綁定的觸發運行函數，不能重復綁定，有且只能綁定一回，下一次綁定的會將上一次的給覆蓋掉

事件設為null，移除事件的監聽

監聽事件，不僅是瀏覽器的一種機制，也是瀏覽器賦予DOM文檔元素的屬性，即事件的監聽是時刻存在的，但是事件觸發時候運行的處理函數，是我們自己定義的

事件的觸發：觸發事件時候運行綁定的處理函數

JS中的事件，其實是以一個類的形式存在的，每個綁定的事件其實都是這個類的一個實例 (引用數據類型的對象) ，瀏覽器會給我們的所有的事件觸發函數中，默認傳入一個實參，就是當前事件的事件對象(event)，在這個事件對象中，保存著當前事件所有信息

事件對象存在于所有的事件的觸發處理函數中，事件對象中有一些常用的屬性，用于控制交互中的效果。

clientX/clientY：鼠標點擊點對應屏幕左上角的位置信息

pageX/pageY：鼠標點擊的點對應body左上角的位置信息

keyCode：鍵盤事件中鍵盤對應的鍵盤碼

Backspace： keyCode:8 刪除鍵

enter： keyCode：13 回車鍵

space： keyCode：32 空格鍵

arrowLeft/Up/Right/Down： keyCode：37 / 38 / 39 / 40 小鍵盤左 / 上 / 右 / 下

事件對象還存在一些兼容性：在標準瀏覽器下他的事件對象存在于當前函數的作用域中，而在ie中存在于window作用域下。

//處理事件對象的兼容性寫法
event=event|| window.event;

//處理事件源的兼容性寫法
event.target || event.srcElement

//處理事件冒泡的兼容性寫法
event.stopPropagation() || event.cancelBubble=true;

//阻止默認行為的兼容寫法
event.preventDefault() || event.returnValue=false;
3.事件委托的思想

有時候我們需要對一個DOM元素下的多個子元素綁定相同的事件，比如說為表格添加可刪除一行的功能，一般的方法是循環綁定事件，但是這樣的辦法顯然性能不高，這時候就可以只為其父元素綁定事件，通過事件委托來實現其多個子元素的相同事件效果。

事件委托的原理為：根據事件流的傳播機制，我們在父級標簽上監聽事件，通過捕獲和冒泡機制，在觸發子集的事件的時候，冒泡傳播給父級，來觸發父級的事件處理函數

那么什么是事件得出傳播機制呢？總的來說可以把事件流的傳播機制分為兩到三個階段：

事件捕獲階段：從DOM最外層標簽HTML開始往子元素捕獲事件源

捕獲到事件對象（可以歸到第一階段）

冒泡傳播：從捕獲到事件源的元素開始往父級元素進行事件冒泡，DOM0級事件中，事件綁定函數的觸發都發生在冒泡階段

DOM2級事件

DOM2級事件就是DOM0級事件的優化，同一個文檔對象同一個事件，可以綁定多個事件處理程序，還可以控制事件處理程序的執行階段在捕獲或者冒泡階段執行。

1.在標準瀏覽器中，綁定DOM2級事件的方法為：addEventListener()

第一個參數為事件類型：[String] click / mouseover / blur ...

第二個參數為事件處理函數：[Function] listener

第三個參數為事件處理函數是否在冒泡階段執行：[Boolean] ture/false

如果直接觸發的是事件源的監聽事件，沒有事件委托的情況下，則冒泡和捕獲會同時發生，此時會根據函數的書寫先后順序執行事件處理程序

事件綁定函數中的this指向當前綁定事件的DOM對象，this還等于currentTarget。
使用 removeEventListener() 來移除事件，參數必須與要移除的事件處理函數地址指針相同。

2.在低版本IE瀏覽器（6-8）中，綁定DOM2級事件的方法為：attachEvent()

IE中的DOM2級事件的事件處理程序,都是在冒泡階段執行的。

第一個參數為事件類型：[String] onclick / onmouseover / onblur ...

第二個參數為事件處理程序：：[Function] listener

IE下DOM2級事件的處理函數是綁定在全局(window)下,所以其內部this指向window，IE下DOM二級事件還存在重復執行多次相同的處理函數和函數執行亂序的問題，可以用 訂閱 - 發布 模式解決這些兼容性問題。
使用detachEvent()來移除事件，參數同樣必須與要移除的事件地址指針相同

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83671.html

相關文章

  • JavaScript中幾個重要的知識點（1） ---- 面向對象

    摘要：中幾個最重要的大知識點面向對象事件異步交互面向對象在中可以把任意的引用和變量都看成是一個對象。我們可以寫一個通用方法來模擬面向對象語言的多態 JavaScript中幾個最重要的大知識點 面向對象 DOM事件 異步交互ajax 面向對象 在JS中可以把任意的引用和變量都看成是一個對象。面向對象的主要三個表現形式： 封裝 繼承 多態 1. 封裝 1.1 單例模式 var obj={...

    acrazing 評論0 收藏0

  • JavaScript中幾個重要的知識點（3） ---- Ajax

    摘要：與響應不同的是，身份驗證并不能提供任何幫助，而且這個請求也不應該被重復提交。 JavaScript中幾個最重要的大知識點 面向對象 DOM事件 異步交互ajax AJAX AJAX是異步的javascript和xml（Asynchronous Javascript And XML）的縮寫，用于網頁局部刷新，提升用戶瀏覽體驗 通常前端程序員關于AJAX的掌握僅僅停留在會用AJAX發送...

    starsfun 評論0 收藏0

  • 2017-06-28 前端日報

    摘要：前端日報精選我是如何實現的在線升級熱更新功能的張鑫旭鑫空間鑫生活翻譯表單的運用第期晉升評審的套路異步編程的四種方式黃博客精選組件設計和分解思考掘金中文譯使登錄頁面變得正確掘金前端從強制開啟壓縮探究插件運行機制掘金個常用的簡 2017-06-28 前端日報 精選 我是如何實現electron的在線升級熱更新功能的？ ? 張鑫旭-鑫空間-鑫生活【翻譯】React 表單： Refs 的運用【...

    QLQ 評論0 收藏0

  • vue常用知識點總結

    摘要：這里借鑒了一下的處理方式，我們把單獨模塊的包裝成一個函數，提供一個全局的回調方法，加載完成時候再調用回調函數。 感謝本文引用鏈接的各位大佬們，小菜鳥我只是個搬運工 1.談一談你理解的vue是什么樣子的？ vue是數據、視圖分離的一個框架，讓數據與視圖間不會發生直接聯系。MVVM 組件化：把整體拆分為各個可以復用的個體 數據驅動：通過數據變化直接影響bom展示，避免dom操作。 可以在...

    xiaokai 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<