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

資訊專欄INFORMATION COLUMN

從八道面試題看JavaScript DOM事件機制

CollinPeng / 3105人閱讀

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

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

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

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

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

題目二

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

題目三

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

題目四

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

題目一到四的答案

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

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

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

題目五

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

題目六

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

題目七

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

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

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

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

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

終極一題

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

答案:1,2,1

因為label和input是有綁定的
點擊label后,瀏覽器自動幫你再點擊一次label
過程就是先進行一次事件機制,這一次對內部input元素的事件監(jiān)聽是不管不問的,所以先打出1
結束后,再進行一次事件機制,這一次,按照正常事件機制流程走,所以接著打出了2,1

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

轉載請注明本文地址:http://systransis.cn/yun/93592.html

相關文章

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

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

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

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

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

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

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

    摘要:例題核心編程第二版變量作用域和命名空間一節(jié)有以下一道題目請問輸出結果是什么要想解這道題,必須先了解中的一些概念的變量名解析機制有時稱為。 例題 《核心編程(第二版)》變量作用域和命名空間一節(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的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<