成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

DOM事件

robin / 1289人閱讀

摘要：同一個元素可以綁定多個統(tǒng)一行為事件對象執(zhí)行某一行為時，不僅執(zhí)行了綁定方法，而且瀏覽器還會默認(rèn)的給這個方法傳遞一個參數(shù)，這個參數(shù)就是事件對象。

1.理解事件

事件行為本身：沒有給事件綁定方法事件也是一直存在的，當(dāng)觸發(fā)行為的時候，也對觸發(fā)對應(yīng)的行為，只不過由于沒有綁定事件，導(dǎo)致沒有任何事件發(fā)生；

事件綁定：給元素綁定一個方法；觸發(fā)行為，執(zhí)行方法；

2.DOM事件

DOM0級事件：1??(onclick)屬于元素的私有屬性；2??使用DOM0級方法指定的事件處理程序被認(rèn)為是元素的方法，這也就解釋為什么事件處理程序的this指向當(dāng)前元素；3??事件處理程序只會在事件冒泡階段處理；4??優(yōu)勢：簡單；跨瀏覽器；5??刪除事件：設(shè)置為null；btn.onclick=null;6??一個元素只能綁定一個同一類型的行為，否則后面的會覆蓋前面的行為。

DOM1：沒有升級事件相關(guān)的方法；

DOM2級事件：1??屬于公有方法，在eventTarget這個類的原型上—>所有的DOM節(jié)點都包含這兩種方法：addEventListener和removeEventlistener；2??三個參數(shù)：（事件名，回調(diào)函數(shù)，布爾值）；布爾值：true—>捕獲階段調(diào)用回調(diào)函數(shù)；false—>冒泡階段調(diào)用回調(diào)函數(shù)；3??addEventListener和removeEventlistener傳入的回調(diào)函數(shù)必須相同，不能使用匿名函數(shù)；4??一般將事件添加到冒泡階段，這樣可以最大限度的兼容瀏覽器。5??同一個元素可以綁定多個統(tǒng)一行為；

3.事件對象

執(zhí)行某一行為時，不僅執(zhí)行了綁定方法，而且瀏覽器還會默認(rèn)的給這個方法傳遞一個參數(shù)，這個參數(shù)就是—>event,事件對象。

事件對象的特點：
1??對象數(shù)據(jù)類型，包含有很多的屬性名和屬性值，用來記錄行為的相關(guān)信息；
2??MouseEvent——UIEvent——Event——Object 原型
3??MouseEvent記錄的是頁面中唯一一個鼠標(biāo)每次觸發(fā)的相關(guān)信息，和到底在哪個元素上觸發(fā)沒有關(guān)系。

4.事件對象的兼容性問題

事件對象本身的兼容性問題：e=e||window.event;

e.type:當(dāng)前行為類型，兼容；

e.clientX/Y:距離可視窗口左上角x,y值，兼容；

e.pageX/Y:距離body(第一屏)左上角x,y值，IE678不兼容；

e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+ e.clientX;

e.target:事件源，當(dāng)前行為觸發(fā)元素，存儲的就是那個元素IE678不兼容 e.target=e.target||e.srcElement;

e.preventDafault:阻止瀏覽器的默認(rèn)行為，IE678不兼容；e.preventDafault?e.preventDafault:e.returnvalue=false;

e.stopPropagation:阻止事件冒泡傳播，IE678不兼容；e.stopPropagation? e.stopPropagation:e.cancelBubble=true;

5.事件的傳播機(jī)制

捕獲：從外向內(nèi)依次查找元素，event capturing；

目標(biāo)：當(dāng)前述事件源本省的操作；

冒泡：從內(nèi)到外依次觸發(fā)的相關(guān)行為，event bubbing;

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95587.html

相關(guān)文章

  • DOM 事件深入淺出（一）

    摘要：本文就將帶大家深入淺出地了解事件的那些屬性和方法。針對不同級別的，我們的事件處理方式也是不一樣的。當(dāng)然其優(yōu)點是不需要操作來完成事件的綁定。文章地址事件深入淺出二。 在項目開發(fā)時，我們時常需要考慮用戶在使用產(chǎn)品時產(chǎn)生的各種各樣的交互事件，比如鼠標(biāo)點擊事件、敲擊鍵盤事件等。這樣的事件行為都是前端DOM事件的組成部分，不同的DOM事件會有不同的觸發(fā)條件和觸發(fā)效果。本文就將帶大家深入淺出地了解...

    macg0406 評論0 收藏0

  • 原生js之DOM事件相關(guān)

    摘要：而由于級標(biāo)準(zhǔn)中并沒有定義事件相關(guān)的內(nèi)容，所以事件級別只包括級，級和級三種。此屬性返回當(dāng)前事件所綁定的對象。自定義事件可以綁定到任意元素上，此處選擇只是為了演示方便。 前端學(xué)習(xí)的東西有很多，現(xiàn)代前端開發(fā)，前端工程化的東西要懂，基礎(chǔ)的原生js也要懂，畢竟，框架都是有生命周期的，更替非常快，然而卻有這么一個框架，它是最輕量的前端框架，每個瀏覽器都內(nèi)置，它叫vanilla.js。好吧，其實va...

    learning 評論0 收藏0

  • 讀書筆記(05) - 事件 - JavaScript高級程序設(shè)計

    摘要：而事件分為個級別級事件處理程序，級事件處理程序和級事件處理程序。級中沒有規(guī)范事件的相關(guān)內(nèi)容，所以沒有級事件處理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript來實現(xiàn)用戶與WEB網(wǎng)頁之間的動態(tài)交互，接收用戶操作并做出相應(yīng)的反饋，而事件在此間則充當(dāng)橋梁的重要角色。 日常開發(fā)中，經(jīng)常會...

    tinylcy 評論0 收藏0

  • 整理DOM事件相關(guān)知識點

    摘要：事件相關(guān)內(nèi)容當(dāng)用戶與瀏覽器發(fā)生的一些交互時如果希望去獲得用戶行為就需要借助事件來完成事件部分內(nèi)容在中重要性不言而喻羅列需要了解與事件相關(guān)的知識如下這也是面試中遇到的問題事件的級別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對象常見的 DOM事件相關(guān)內(nèi)容 當(dāng)用戶與瀏覽器發(fā)生的一些交互時, 如果希望去獲得用戶行為, 就需要借助事件來完成. 事件部分內(nèi)容在 JS中重要性不言而喻. ...

    shenhualong 評論0 收藏0

  • 整理DOM事件相關(guān)知識點

    摘要：事件相關(guān)內(nèi)容當(dāng)用戶與瀏覽器發(fā)生的一些交互時如果希望去獲得用戶行為就需要借助事件來完成事件部分內(nèi)容在中重要性不言而喻羅列需要了解與事件相關(guān)的知識如下這也是面試中遇到的問題事件的級別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對象常見的 DOM事件相關(guān)內(nèi)容 當(dāng)用戶與瀏覽器發(fā)生的一些交互時, 如果希望去獲得用戶行為, 就需要借助事件來完成. 事件部分內(nèi)容在 JS中重要性不言而喻. ...

    red_bricks 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<