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

資訊專欄INFORMATION COLUMN

DOM事件

DDreach / 1357人閱讀

摘要：語法事件執(zhí)行腳本在元素上綁定事件。最后這個(gè)布爾值參數(shù)如果是，表示在捕獲階段調(diào)用事件處理程序如果是，表示在冒泡階段調(diào)用事件處理程序。

注：部分參考來源：JavaScript 高級(jí)程序設(shè)計(jì)（第3版）
注：部分參考來源：慕課網(wǎng)
什么是事件

事件就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間。

事件流

事件流描述的是從頁面中接收事件的順序。

IE的事件流是事件冒泡流。

Netscape Communicator 的事件流是事件捕獲流。

事件冒泡

IE的事件流叫做事件冒泡。

單擊頁面中的

，這個(gè)click事件按照下圖順序傳播：

事件捕獲

Netscape Communicator 團(tuán)隊(duì)的事件流叫做事件捕獲。

單擊頁面中的

，這個(gè)click事件按照下圖順序傳播：

HTML事件

直接在HTML元素標(biāo)簽內(nèi)添加事件、執(zhí)行腳本。

語法：

在HTML元素上綁定事件。

執(zhí)行腳本可以是一個(gè)函數(shù)的調(diào)用

缺點(diǎn)：HTML代碼和javaScript代碼緊密耦合。

DOM0級(jí)事件

語法：ele.事件 = 執(zhí)行腳本

功能：在DOM對(duì)象上綁定事件

說明：執(zhí)行腳本可以是一個(gè)匿名函數(shù)，也可以是一個(gè)函數(shù)的調(diào)用

開始
DOM2級(jí)事件

定義了兩個(gè)方法：addEventListener()、removeEventListener()

3個(gè)參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個(gè)布爾值。最后這個(gè)布爾值參數(shù)如果是true，表示在捕獲階段調(diào)用事件處理程序；如果是false，表示在冒泡階段調(diào)用事件處理程序。

按鈕
事件類型

UI事件

焦點(diǎn)事件

鼠標(biāo)事件

滾輪事件

文本事件

鍵盤事件

合成事件

變動(dòng)事件

onload：頁面加載時(shí)觸發(fā) onclick：鼠標(biāo)點(diǎn)擊時(shí)觸發(fā)
onmouseover：鼠標(biāo)滑過時(shí)觸發(fā) Donmouseout：鼠標(biāo)離開時(shí)觸發(fā)
onfoucs：獲得焦點(diǎn)時(shí)觸發(fā) onblur：失去焦點(diǎn)時(shí)觸發(fā)
onchange：域的內(nèi)容改變時(shí)發(fā)生

小例子：當(dāng)腳本放在head之間時(shí) ，加 onload

小例子： onfoucs、onblur

小例子：onchange


    請(qǐng)選擇顏色：
鍵盤事件與keyCode屬性
onkeydown：在用戶按下一個(gè)鍵盤按鍵時(shí)發(fā)生 onkeypress：在鍵盤按鍵被按下并釋放一個(gè)鍵時(shí)發(fā)生
onkeyup：在鍵盤按鍵被松開時(shí)發(fā)生 keyCode：返回onkeypress、onkeydown或onkeyup 事件觸發(fā)的鍵的值的字符代碼，或鍵的代碼

小例子：keyCode

document.onkeypress = function(event){
    console.log(event.keyCode);
}

小例子：onkeyup




    
您還可以輸入30/30
事件委托

事件委托利用了事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。即：利用冒泡機(jī)制將一類事件觸發(fā)盡可能高的委托給其父節(jié)點(diǎn)或祖先節(jié)點(diǎn)來觸發(fā)事件處理函數(shù)，這樣只需要定義一個(gè)函數(shù)，訪問一次DOM對(duì)象，減少了內(nèi)存的占用以及訪問DOM元素的時(shí)間，降低了性能的消耗。如：li-->ul

    
    
  • 1
    • 
    
  • 2
    • 
    
  • 3
    • 
    
  • 4
    • 
    
  • 5
    • 




    
    
    



不好的地方，請(qǐng)多多指教

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

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

相關(guān)文章

  • DOM 事件深入淺出（一）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<