亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

CollinPeng / 3133人閱讀

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

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

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

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

請問:點(diǎn)擊div.test1后,數(shù)字1和2,誰先被打印出來?

題目二

請問:點(diǎn)擊div.test1后,數(shù)字1和2,誰先被打印出來?

題目三

請問:點(diǎn)擊div.test1后,數(shù)字1和2,誰先被打印出來?

題目四

請問:點(diǎn)擊div.test1后,數(shù)字1和2,誰先被打印出來?

題目一到四的答案

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

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

OK,上面問題都搞清楚了嗎?下面繼續(xù)咯~

題目五

請問:點(diǎn)擊div.test1后,數(shù)字1和2,誰先被打印出來?

題目六

請問:點(diǎn)擊div.test1后,數(shù)字1和2,誰先被打印出來?

題目七

請問:點(diǎn)擊div.test1后,數(shù)字1和2的出現(xiàn)順序是什么樣的?

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

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

我相信,題目五和題目六肯定是沒問題的,但題目七可能和你想的不太一樣,難道不是先捕獲再冒泡了嗎?

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

終極一題

請問:點(diǎn)擊label后,數(shù)字1和2的出現(xiàn)順序是什么樣的?

答案:1,2,1

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

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

轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/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è)老生常談的問題,但是今天我才明白過來實(shí)際是怎么回事。使用ES...

    沈儉 評論0 收藏0
  • 帝都寒冬一年經(jīng)驗(yàn)前端面試總結(jié)

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

    Scott 評論0 收藏0
  • 「前端面試題系列7」Javascript 中的事件機(jī)制原生到框架)

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

    Tony 評論0 收藏0
  • 一道題看Python的LEGB規(guī)則

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

    iamyoung001 評論0 收藏0

發(fā)表評論

0條評論

CollinPeng

|高級講師

TA的文章

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