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

資訊專(zhuān)欄INFORMATION COLUMN

從八道面試題看JavaScript DOM事件機(jī)制

CollinPeng / 3086人閱讀

摘要：事件機(jī)制其實(shí)很簡(jiǎn)單，無(wú)非冒泡和捕獲這兩點(diǎn)，筆者不再贅述，網(wǎng)上相關(guān)文章一大堆，下面讓我們直接看面試題題目一到七，統(tǒng)一設(shè)置題目一請(qǐng)問(wèn)點(diǎn)擊后，數(shù)字和，誰(shuí)先被打印出來(lái)題目二請(qǐng)問(wèn)點(diǎn)擊后，數(shù)字和，誰(shuí)先被打印出來(lái)題目三請(qǐng)問(wèn)點(diǎn)擊后，數(shù)字和，誰(shuí)先被打印出來(lái)題

As we all know,事件機(jī)制其實(shí)很簡(jiǎn)單，無(wú)非冒泡和捕獲
這兩點(diǎn)，筆者不再贅述，網(wǎng)上相關(guān)文章一大堆，下面讓我們直接看面試題

題目一到七，統(tǒng)一設(shè)置css

.test2 {
  height: 50px;
}
題目一

請(qǐng)問(wèn)：點(diǎn)擊div.test1后，數(shù)字1和2，誰(shuí)先被打印出來(lái)？

題目二

請(qǐng)問(wèn)：點(diǎn)擊div.test1后，數(shù)字1和2，誰(shuí)先被打印出來(lái)？

題目三

請(qǐng)問(wèn)：點(diǎn)擊div.test1后，數(shù)字1和2，誰(shuí)先被打印出來(lái)？

題目四

請(qǐng)問(wèn)：點(diǎn)擊div.test1后，數(shù)字1和2，誰(shuí)先被打印出來(lái)？

題目一到四的答案

題目一：2,1
題目二：1,2
題目三：2,1
題目四：1,2

如果上面四道題，你做不對(duì)，說(shuō)明了兩件事
一、你對(duì)事件機(jī)制的全過(guò)程不了解，其實(shí)很簡(jiǎn)單事件機(jī)制是先進(jìn)行捕獲，再進(jìn)行冒泡
二、你對(duì)addEventListener的第三個(gè)參數(shù)不了解，看MDN文檔吧

OK，上面問(wèn)題都搞清楚了嗎？下面繼續(xù)咯~

題目五

請(qǐng)問(wèn)：點(diǎn)擊div.test1后，數(shù)字1和2，誰(shuí)先被打印出來(lái)？

題目六

請(qǐng)問(wèn)：點(diǎn)擊div.test1后，數(shù)字1和2，誰(shuí)先被打印出來(lái)？

題目七

請(qǐng)問(wèn)：點(diǎn)擊div.test1后，數(shù)字1和2的出現(xiàn)順序是什么樣的？

題目五、題目六和題目七的答案

題目五：2,1
題目六：1,2
題目七：1,2

我相信，題目五和題目六肯定是沒(méi)問(wèn)題的，但題目七可能和你想的不太一樣，難道不是先捕獲再冒泡了嗎？

當(dāng)然不是
為什么呢？
因?yàn)?b>如果被監(jiān)聽(tīng)的元素沒(méi)有子元素，那么哪個(gè)監(jiān)聽(tīng)代碼寫(xiě)在前面，就先執(zhí)行哪個(gè)！

終極一題

請(qǐng)問(wèn)：點(diǎn)擊label后，數(shù)字1和2的出現(xiàn)順序是什么樣的？

答案：1,2,1

因?yàn)閘abel和input是有綁定的
點(diǎn)擊label后，瀏覽器自動(dòng)幫你再點(diǎn)擊一次label
過(guò)程就是先進(jìn)行一次事件機(jī)制，這一次對(duì)內(nèi)部input元素的事件監(jiān)聽(tīng)是不管不問(wèn)的，所以先打出1
結(jié)束后，再進(jìn)行一次事件機(jī)制，這一次，按照正常事件機(jī)制流程走，所以接著打出了2,1

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

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

相關(guān)文章

  • 從經(jīng)典面試題看var與let

    摘要：這也就解釋了以下代碼運(yùn)行正常那么，的循環(huán)里發(fā)生了什么呢變量提升 for (var index = 0; index < 5; index++) { setTimeout(function (){ console.log(index);//5 }, 10) } console.log(index)// 5 這是個(gè)老生常談的問(wèn)題，但是今天我才明白過(guò)來(lái)實(shí)際是怎么回事。使用ES...

    沈儉 評(píng)論0 收藏0

  • 帝都寒冬一年經(jīng)驗(yàn)前端面試總結(jié)

    摘要：不過(guò)幸運(yùn)的是所有面試的公司都給了，在這里總結(jié)下經(jīng)驗(yàn)吧。這里推薦下我當(dāng)時(shí)看的一篇的面經(jīng)，木易楊老師寫(xiě)的大廠高級(jí)前端面試題匯總。 前言 本人畢業(yè)一年，最近陸續(xù)面試了頭條、瓜子、360、猿輔導(dǎo)、中信銀行、老虎等公司，由于最近比較寒冬而且招1-3年的并不多，再加上自己對(duì)公司規(guī)模和位置有一定要求，所以最后合適的也就這幾家了。不過(guò)幸運(yùn)的是所有面試的公司都給了offer，在這里總結(jié)下經(jīng)驗(yàn)吧。掘金：h...

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

  • 「前端面試題系列7」Javascript 中的事件機(jī)制（從原生到框架）

    摘要：要想注冊(cè)過(guò)的事件能夠被解除，必須將回調(diào)函數(shù)保存起來(lái)，否則無(wú)法解除。當(dāng)用阻止瀏覽器的默認(rèn)行為時(shí)，會(huì)做下面這件事停止回調(diào)函數(shù)執(zhí)行并立即返回。 showImg(https://segmentfault.com/img/bVboOcb?w=750&h=422); 前言 這是前端面試題系列的第 7 篇，你可能錯(cuò)過(guò)了前面的篇章，可以在這里找到： 理解函數(shù)的柯里化 ES6 中箭頭函數(shù)的用法 thi...

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

  • 一道題看Python的LEGB規(guī)則

    摘要：例題核心編程第二版變量作用域和命名空間一節(jié)有以下一道題目請(qǐng)問(wèn)輸出結(jié)果是什么要想解這道題，必須先了解中的一些概念的變量名解析機(jī)制有時(shí)稱(chēng)為。 例題 《核心編程(第二版)》變量作用域和命名空間一節(jié)有以下一道題目 # coding=utf-8 #!/usr/bin/env python def proc1(): j,k = 3,4 print j == %d and k ==...

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

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

0條評(píng)論

CollinPeng

男|高級(jí)講師

TA的文章

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