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

資訊專欄INFORMATION COLUMN

JavaScript中幾個(gè)重要的知識(shí)點(diǎn)（2） ---- DOM事件

dantezhao / 508人閱讀

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

JavaScript中幾個(gè)最重要的大知識(shí)點(diǎn)

面向?qū)ο?/p>

DOM事件

異步交互ajax

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

點(diǎn)擊: click

滾輪: scroll

滑動(dòng): move

進(jìn)入: enter

加載: load

2.事件機(jī)制

事件的監(jiān)聽(tīng)(事件的綁定)

通過(guò)on+事件名 這種類型綁定的事件都叫做DOM0級(jí)事件

DOM0級(jí)事件，同一個(gè)元素的同一個(gè)事件監(jiān)聽(tīng)，綁定的觸發(fā)運(yùn)行函數(shù)，不能重復(fù)綁定，有且只能綁定一回，下一次綁定的會(huì)將上一次的給覆蓋掉

事件設(shè)為null，移除事件的監(jiān)聽(tīng)

監(jiān)聽(tīng)事件，不僅是瀏覽器的一種機(jī)制，也是瀏覽器賦予DOM文檔元素的屬性，即事件的監(jiān)聽(tīng)是時(shí)刻存在的，但是事件觸發(fā)時(shí)候運(yùn)行的處理函數(shù)，是我們自己定義的

事件的觸發(fā)：觸發(fā)事件時(shí)候運(yùn)行綁定的處理函數(shù)

JS中的事件，其實(shí)是以一個(gè)類的形式存在的，每個(gè)綁定的事件其實(shí)都是這個(gè)類的一個(gè)實(shí)例 (引用數(shù)據(jù)類型的對(duì)象) ，瀏覽器會(huì)給我們的所有的事件觸發(fā)函數(shù)中，默認(rèn)傳入一個(gè)實(shí)參，就是當(dāng)前事件的事件對(duì)象(event)，在這個(gè)事件對(duì)象中，保存著當(dāng)前事件所有信息

事件對(duì)象存在于所有的事件的觸發(fā)處理函數(shù)中，事件對(duì)象中有一些常用的屬性，用于控制交互中的效果。

clientX/clientY：鼠標(biāo)點(diǎn)擊點(diǎn)對(duì)應(yīng)屏幕左上角的位置信息

pageX/pageY：鼠標(biāo)點(diǎn)擊的點(diǎn)對(duì)應(yīng)body左上角的位置信息

keyCode：鍵盤(pán)事件中鍵盤(pán)對(duì)應(yīng)的鍵盤(pán)碼

Backspace： keyCode:8 刪除鍵

enter： keyCode：13 回車鍵

space： keyCode：32 空格鍵

arrowLeft/Up/Right/Down： keyCode：37 / 38 / 39 / 40 小鍵盤(pán)左 / 上 / 右 / 下

事件對(duì)象還存在一些兼容性：在標(biāo)準(zhǔn)瀏覽器下他的事件對(duì)象存在于當(dāng)前函數(shù)的作用域中，而在ie中存在于window作用域下。

//處理事件對(duì)象的兼容性寫(xiě)法
event=event|| window.event;

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

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

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

有時(shí)候我們需要對(duì)一個(gè)DOM元素下的多個(gè)子元素綁定相同的事件，比如說(shuō)為表格添加可刪除一行的功能，一般的方法是循環(huán)綁定事件，但是這樣的辦法顯然性能不高，這時(shí)候就可以只為其父元素綁定事件，通過(guò)事件委托來(lái)實(shí)現(xiàn)其多個(gè)子元素的相同事件效果。

事件委托的原理為：根據(jù)事件流的傳播機(jī)制，我們?cè)诟讣?jí)標(biāo)簽上監(jiān)聽(tīng)事件，通過(guò)捕獲和冒泡機(jī)制，在觸發(fā)子集的事件的時(shí)候，冒泡傳播給父級(jí)，來(lái)觸發(fā)父級(jí)的事件處理函數(shù)

那么什么是事件得出傳播機(jī)制呢？總的來(lái)說(shuō)可以把事件流的傳播機(jī)制分為兩到三個(gè)階段：

事件捕獲階段：從DOM最外層標(biāo)簽HTML開(kāi)始往子元素捕獲事件源

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

冒泡傳播：從捕獲到事件源的元素開(kāi)始往父級(jí)元素進(jìn)行事件冒泡，DOM0級(jí)事件中，事件綁定函數(shù)的觸發(fā)都發(fā)生在冒泡階段

DOM2級(jí)事件

DOM2級(jí)事件就是DOM0級(jí)事件的優(yōu)化，同一個(gè)文檔對(duì)象同一個(gè)事件，可以綁定多個(gè)事件處理程序，還可以控制事件處理程序的執(zhí)行階段在捕獲或者冒泡階段執(zhí)行。

1.在標(biāo)準(zhǔn)瀏覽器中，綁定DOM2級(jí)事件的方法為：addEventListener()

第一個(gè)參數(shù)為事件類型：[String] click / mouseover / blur ...

第二個(gè)參數(shù)為事件處理函數(shù)：[Function] listener

第三個(gè)參數(shù)為事件處理函數(shù)是否在冒泡階段執(zhí)行：[Boolean] ture/false

如果直接觸發(fā)的是事件源的監(jiān)聽(tīng)事件，沒(méi)有事件委托的情況下，則冒泡和捕獲會(huì)同時(shí)發(fā)生，此時(shí)會(huì)根據(jù)函數(shù)的書(shū)寫(xiě)先后順序執(zhí)行事件處理程序

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

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

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

第一個(gè)參數(shù)為事件類型：[String] onclick / onmouseover / onblur ...

第二個(gè)參數(shù)為事件處理程序：：[Function] listener

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/83671.html

相關(guān)文章

  • JavaScript中幾個(gè)重要的知識(shí)點(diǎn)（1） ---- 面向?qū)ο?/b>

    摘要：中幾個(gè)最重要的大知識(shí)點(diǎn)面向?qū)ο笫录惒浇换ッ嫦驅(qū)ο笤谥锌梢园讶我獾囊煤妥兞慷伎闯墒且粋€(gè)對(duì)象。我們可以寫(xiě)一個(gè)通用方法來(lái)模擬面向?qū)ο笳Z(yǔ)言的多態(tài) JavaScript中幾個(gè)最重要的大知識(shí)點(diǎn) 面向?qū)ο?DOM事件 異步交互ajax 面向?qū)ο?在JS中可以把任意的引用和變量都看成是一個(gè)對(duì)象。面向?qū)ο蟮闹饕齻€(gè)表現(xiàn)形式： 封裝 繼承 多態(tài) 1. 封裝 1.1 單例模式 var obj={...

    acrazing 評(píng)論0 收藏0

  • JavaScript中幾個(gè)重要的知識(shí)點(diǎn)（3） ---- Ajax

    摘要：與響應(yīng)不同的是，身份驗(yàn)證并不能提供任何幫助，而且這個(gè)請(qǐng)求也不應(yīng)該被重復(fù)提交。 JavaScript中幾個(gè)最重要的大知識(shí)點(diǎn) 面向?qū)ο?DOM事件 異步交互ajax AJAX AJAX是異步的javascript和xml（Asynchronous Javascript And XML）的縮寫(xiě)，用于網(wǎng)頁(yè)局部刷新，提升用戶瀏覽體驗(yàn) 通常前端程序員關(guān)于AJAX的掌握僅僅停留在會(huì)用AJAX發(fā)送...

    starsfun 評(píng)論0 收藏0

  • 2017-06-28 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選我是如何實(shí)現(xiàn)的在線升級(jí)熱更新功能的張?chǎng)涡聆慰臻g鑫生活翻譯表單的運(yùn)用第期晉升評(píng)審的套路異步編程的四種方式黃博客精選組件設(shè)計(jì)和分解思考掘金中文譯使登錄頁(yè)面變得正確掘金前端從強(qiáng)制開(kāi)啟壓縮探究插件運(yùn)行機(jī)制掘金個(gè)常用的簡(jiǎn) 2017-06-28 前端日?qǐng)?bào) 精選 我是如何實(shí)現(xiàn)electron的在線升級(jí)熱更新功能的？ ? 張?chǎng)涡?鑫空間-鑫生活【翻譯】React 表單： Refs 的運(yùn)用【...

    QLQ 評(píng)論0 收藏0

  • vue常用知識(shí)點(diǎn)總結(jié)

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

    xiaokai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<