手機瀏覽器在滾動當前頁面(還可能是縮放頁面)時,由于默認行為被阻止,導致頁面被迫靜止,導致用戶使用體驗差,感覺滾動頁面有停頓感。
具體一點的解釋:由于 touchstart 事件對象的 cancelable 屬性為 true,也就是說它的默認行為可以被監(jiān)聽器通過 preventDefault() 方法阻止。但瀏覽器無法預先知道一個監(jiān)聽器會不會調用 preventDefault(),它能做的只有等監(jiān)聽器執(zhí)行完后再去執(zhí)行默認行為,而監(jiān)聽器執(zhí)行是要耗時的,有些甚至耗時很明顯,這樣就會導致頁面卡頓。即便監(jiān)聽器是個空函數(shù),也會產(chǎn)生一定的卡頓,畢竟空函數(shù)的執(zhí)行也會耗時。
addEventListener的useCapture參數(shù)
基本概念:xxx.addEventListener('事件名', function(xxx){xxx}, useCapture).
第一個參數(shù)表示事件名稱(不含 on,如 "click");第二個參數(shù)表示要接收事件處理的函數(shù);第三個參數(shù)為 useCapture.
下面就來看看這個東西是個啥意思,直接舉例子說明更加直觀。
<div id="level1"> <div id="level2"> <div id="level3">請在此點擊</div> </div></div><div id="info"></div>
var level1 = document.getElementById("level1");var level2 = document.getElementById("level2");var level3= document.getElementById("level3");var info = document.getElementById("info");outDiv.addEventListener("click", function () { info.innerHTML += "level1" + "<br>"; }, false);middleDiv.addEventListener("click", function () { info.innerHTML += "level2" + "<br>"; }, false);inDiv.addEventListener("click", function () { info.innerHTML += "level3" + "<br>"; }, false);根據(jù)上述代碼來看這個 useCapture 為 true 和 false的作用效果:
全為 false 時,觸發(fā)順序為:level3、level2、level1
全為 true 時,觸發(fā)順序為:level1、level2、level3
level1為 true,其他為 false 時,觸發(fā)順序為:level1、level3、level2
level2為 true,其他為 false 時,觸發(fā)順序為:level2、level3、level1
level3為 true,其他為 false 時,觸發(fā)順序為:level3、level2、level1
level1為 false,其他為 true時,觸發(fā)順序為:level2、level3、level1
level2為 false,其他為 true時,觸發(fā)順序為:level1、level3、level2
level3為 false,其他為 true時,觸發(fā)順序為:level1、level2、level3
由上述結果得出如下結論:
true 的觸發(fā)順序總是在 false 之前;
如果多個均為 true,則外層的觸發(fā)先于內層;
如果多個均為 false,則內層的觸發(fā)先于外層。
passive屬性來控制事件行為
使用方式如下
addEventListener('事件名', function(xxx){xxx}, { capture: false, passive: false, once: false})三個屬性都是布爾類型的開關,默認值都為 false。
capture:等價于以前的 useCapture 參數(shù);
once:就是表明該監(jiān)聽器是一次性的,執(zhí)行一次后就被自動 removeEventListener 掉;
passive:用于webapp的touch事件
據(jù)了解,在手機瀏覽器使用事件的時候,有 80% 的滾動事件監(jiān)聽器是不會阻止默認行為的,也就是說大部分情況下,瀏覽器是白等了。所以,passive 監(jiān)聽器誕生了,passive 的意思是“順從的”,表示它不會對事件的默認行為說 no,瀏覽器知道了一個監(jiān)聽器是 passive 的,它就可以在兩個線程里同時執(zhí)行監(jiān)聽器中的 JavaScript 代碼和瀏覽器的默認行為了。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點
疑難解答