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

資訊專欄INFORMATION COLUMN

javascript 事件流 捕獲與冒泡

DC_er / 1956人閱讀

摘要：捕獲型事件流事件的傳播是從最不特定的事件目標(biāo)到最特定的事件目標(biāo)。鼠標(biāo)移入元素范圍內(nèi)觸發(fā)，該事件不冒泡，即鼠標(biāo)移到其后代元素上時(shí)不會(huì)觸發(fā)。

事件通常與函數(shù)配合使用，這樣就可以通過發(fā)生的事件來驅(qū)動(dòng)函數(shù)執(zhí)行，事件是可以被 JavaScript 偵測到的行為

綁定事件

首先我們要先綁定事件 綁定事件有三種

1）在DOM元素中直接綁定，我們可以在DOM元素上綁定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等等

只可以執(zhí)行一次 多次使用會(huì)跟隨文檔流所覆蓋
   

     
     只彈出一個(gè) 瞅你咋地 你瞅啥被覆蓋

2）在JavaScript代碼中綁定，在JavaScript代碼中（即 script 標(biāo)簽內(nèi)）綁定事件可以使JavaScript代碼與HTML標(biāo)簽分離，文檔結(jié)構(gòu)清晰，便于管理和開發(fā)

3）使用事件監(jiān)聽綁定事件
綁定事件的另一種方法是用 addEventListener() 或 attachEvent() 來綁定事件監(jiān)聽函數(shù)

   

   
        兩個(gè)都可以正常彈出 跟隨文檔流執(zhí)行
事件流過程 冒泡 捕獲

DOM標(biāo)準(zhǔn)規(guī)定事件流包括三個(gè)階段：事件捕獲階段、處于目標(biāo)階段和事件冒泡階段。
捕獲型事件流：事件的傳播是從最不特定的事件目標(biāo)到最特定的事件目標(biāo)。即從外部到內(nèi)部。
冒泡型事件流：事件的傳播是從最特定的事件目標(biāo)到最不特定的事件目標(biāo)。即從內(nèi)部到外部

我們有以下代碼 點(diǎn)擊box3的時(shí)候 跟隨圖片描述 捕獲 冒泡

    
box1
        
box2
            
box3

在處于目標(biāo)階段的時(shí)候 就是在本文中點(diǎn)擊box3的時(shí)候 如果把冒泡寫在捕獲前面 會(huì)跟隨文檔流所執(zhí)行 導(dǎo)致先冒泡 再捕獲 這一點(diǎn)一定要注意 如以下

如同圖中所示 輸出時(shí)順序和你寫入時(shí)順序有關(guān)

事件委托

什么是事件委托：
事件委托——給父元素綁定事件，用來監(jiān)聽子元素的冒泡事件，并找到是哪個(gè)子元素的事件
事件委托三部曲：
第一步：給父元素綁定事件
給元素ul添加綁定事件，通過addEventListener為點(diǎn)擊事件click添加綁定
第二步：監(jiān)聽子元素的冒泡事件
這里默認(rèn)是冒泡，點(diǎn)擊子元素li會(huì)向上冒泡
第三步：找到是哪個(gè)子元素的事件
通過匿名回調(diào)函數(shù)來接收事件對象，通過alert驗(yàn)證

    

        
    
            
  • 1
    • 
            
  • 2
    • 
            
  • 3
    • 
            
  • 4
    • 
            
  • 5
    • 
            
  • 6
    • 
            
  • 7
    • 
            
  • 8
    • 
            
  • 9
    • 
            
  • 10
    •

如圖所示

阻止事件

阻止冒泡

我們在上文寫了冒泡事件 既然它能冒泡 如果我們不想用這個(gè)效果了 那么我們有辦法阻止它嗎？答案是肯定的。我們直接看代碼，能夠更加明了

第一次點(diǎn)擊

當(dāng)我們第二次點(diǎn)擊的時(shí)候 只會(huì)彈出一個(gè)box1 ，阻止了box2的第二次冒泡

阻止默認(rèn)事件

在我們網(wǎng)頁中 如果我們點(diǎn)擊右鍵是不是會(huì)彈出一個(gè)框，這里我不會(huì)截圖 就不給大家展示了，里面會(huì)有刷新、粘貼、復(fù)制、剪切等等按鈕 這個(gè)就是瀏覽器的右鍵默認(rèn)事件，我們來嘗試下看能不能把它給阻止了。

有興趣的話我們還可以把它變成自己的

mouseover:鼠標(biāo)移入目標(biāo)范圍中。鼠標(biāo)移到其后代元素上時(shí)會(huì)觸發(fā)
//當(dāng)鼠標(biāo)進(jìn)入box區(qū)域彈出顯示框

    box.onmouseover=function(){
        alert("我進(jìn)來了")
    }
mousemove:鼠標(biāo)在元素內(nèi)部移到時(shí)不斷觸發(fā)。
 box.onmousemove=function(){
        console.log("自由的行走")
    }
    會(huì)不斷的被觸發(fā)，移動(dòng)一次觸發(fā)一次![圖片描述][9]
鍵盤事件

keydown():

按鍵按下時(shí)，會(huì)觸發(fā)該事件；



2. keyup();

    按鍵松開時(shí)，會(huì)觸發(fā)該事件；



3. keypress();

    敲擊按鍵時(shí)觸發(fā)，和keyup()大致相同 我找了很多資料 卻還是沒有明確的區(qū)別 希望有大佬指點(diǎn)下
HTML事件

1.onload 文檔加載完成后執(zhí)行函數(shù)

2.select 被選中的時(shí)候使用 我的理解是在input中 選中的時(shí)候

3.onchange 當(dāng)內(nèi)容失去焦點(diǎn)的時(shí)候或者改變的時(shí)候觸發(fā)

focus 得到光標(biāo)的時(shí)候使用

5.resize 窗口變化時(shí)

以上就是我對js事件的理解，首先謝謝您的觀看，文中如果有些不周到的地方還請指點(diǎn)一下，碼字不易，請各位多多支持。

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

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

相關(guān)文章

  • javascript 事件流 捕獲與冒泡

    摘要：捕獲型事件流事件的傳播是從最不特定的事件目標(biāo)到最特定的事件目標(biāo)。鼠標(biāo)移入元素范圍內(nèi)觸發(fā)，該事件不冒泡，即鼠標(biāo)移到其后代元素上時(shí)不會(huì)觸發(fā)。 事件通常與函數(shù)配合使用，這樣就可以通過發(fā)生的事件來驅(qū)動(dòng)函數(shù)執(zhí)行，事件是可以被 JavaScript 偵測到的行為 綁定事件 首先我們要先綁定事件 綁定事件有三種 1）在DOM元素中直接綁定，我們可以在DOM元素上綁定onclick、onmouseov...

    aboutU 評論0 收藏0

  • javascript -- 事件--事件流-- 冒泡 --捕獲

    摘要：在內(nèi)聯(lián)模型中，事件處理函數(shù)是標(biāo)簽的一個(gè)屬性，用于處理指定事件。事件捕獲與冒泡原理圖事件流同時(shí)支持兩種事件模型捕獲型事件和冒泡型事件，但是，捕獲型事件先發(fā)生。 javascript -- 事件 事件是js和用戶操作交互的橋梁, JavaScript 有三種事件模型：內(nèi)聯(lián)模型、腳本模型和 DOM2 模型 內(nèi)聯(lián)模型 這種模型是最傳統(tǒng)接單的一種處理事件的方法。在內(nèi)聯(lián)模型中，事件處理函數(shù)是 HT...

    leeon 評論0 收藏0

  • 理解DOM事件流的三個(gè)階段

    摘要：本文主要解決兩個(gè)問題什么是事件流事件流的三個(gè)階段起因在學(xué)習(xí)前端的大半年來，對事件了解甚少。事件流所描述的就是從頁面中接受事件的順序。事件流事件流包括三個(gè)階段。防止事件冒泡而帶來不必要的錯(cuò)誤和困擾。分有事件冒泡與事件捕獲兩種。 本文主要解決兩個(gè)問題： 什么是事件流 DOM事件流的三個(gè)階段 起因 在學(xué)習(xí)前端的大半年來，對DOM事件了解甚少。一般也只是用用onclick來綁定個(gè)點(diǎn)擊事件。...

    xiangzhihong 評論0 收藏0

  • 理解DOM事件流的三個(gè)階段

    摘要：本文主要解決兩個(gè)問題什么是事件流事件流的三個(gè)階段起因在學(xué)習(xí)前端的大半年來，對事件了解甚少。事件流所描述的就是從頁面中接受事件的順序。事件流事件流包括三個(gè)階段。防止事件冒泡而帶來不必要的錯(cuò)誤和困擾。分有事件冒泡與事件捕獲兩種。 本文主要解決兩個(gè)問題： 什么是事件流 DOM事件流的三個(gè)階段 起因 在學(xué)習(xí)前端的大半年來，對DOM事件了解甚少。一般也只是用用onclick來綁定個(gè)點(diǎn)擊事件。...

    afishhhhh 評論0 收藏0

發(fā)表評論

0條評論

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