一. 常用的鍵盤事件
1. 鍵盤事件
2. 鍵盤事件對象
二. BOM
1 . 什麼是BOM
2 . window對象的常見事件
頁面（窗口）加載事件（2種）
第1種
window.onload 是窗口 (頁面）加載事件，當文檔內容完全加載完成會觸發該事件(包括圖像、腳本文件、CSS 文件等), 就調用的處理函數。
第二種
DOMContentLoaded 事件觸發時，僅當DOM加載完成，不包括樣式表，圖片，flash等等。
IE9以上才支持！！！
3.調整窗口大小事件
注意：
①. 只要窗口大小發生像素變化，就會觸發這個事件。
② . 常利用這個事件完成響應式佈局window.innerWidth 當前屏幕的寬度
4 . 定時器（兩種）
window 對象給我們提供了 2 個非常好用的方法-定時器。
-
setTimeout() 回調函數
-
setInterval()
5.停止定時器
// 停止定時器
clearTimeout(timer);
6 . setInterval() 鬧鐘定時器
7 . location對象
URL常用屬性：
location對象常見屬性：
location對象的常見方法：
8 . history對象
9.navigator對象
navigator 對象包含有關瀏覽器的信息，它有很多屬性，我們最常用的是 userAgent，該屬性可以返回由客戶機發送服務器的 user-agent 頭部的值。
下面前端代碼可以判斷用戶那個終端打開頁面，實現跳轉
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = ""; //手機
} else {
window.location.href = ""; //電腦
}
面試常問☆：
JS運行機制：
1 . JS 是單線程
單線程就意味着，所有任務需要排隊，前一個任務結束，纔會執行後一個任務。如果前一個任務耗時很長，後一個任務就不得不一直等着。
這樣所導致的問題是： 如果 JS 執行的時間過長，這樣就會造成頁面的渲染不連貫，導致頁面渲染加載阻塞的感覺。
2 . 同步任務和異步任務
單線程導致的問題就是後面的任務等待前面任務完成，如果前面任務很耗時（比如讀取網絡數據），後面任務不得不一直等待！！
爲了解決這個問題，利用多核 CPU 的計算能力，HTML5 提出 Web Worker 標準，允許 JavaScript 腳本創建多個線程，但是子線程完全受主線程控制。於是，JS 中出現了同步任務和異步任務。
① 同步
前一個任務結束後再執行後一個任務，程序的執行順序與任務的排列順序是一致的、同步的。比如做飯的同步做法：我們要燒水煮飯，等水開了（10分鐘之後），再去切菜，炒菜。
② 異步
你在做一件事情時，因爲這件事情會花費很長時間，在做這件事的同時，你還可以去處理其他事情。比如做飯的異步做法，我們在燒水的同時，利用這10分鐘，去切菜，炒菜。
JS中所有任務可以分成兩種，一種是同步任務（synchronous），另一種是異步任務（asynchronous）。
同步任務指的是：
在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務；
異步任務指的是：
不進入主線程、而進入”任務隊列”的任務，當主線程中的任務運行完了，纔會從”任務隊列”取出異步任務放入主線程執行。
3.JS執行機制（事件循環）
作業部分：
題目描述
頁面上有一個電子時鐘，顯示當前的年月日，時分秒，要求自動變化，具體表現如下圖：
1）要求雙位顯示，例如：九點九分九秒，顯示爲09:09:09
<body>
<div></div>
<script>
var div = document.querySelector('div');
getTimer()
setInterval(getTimer, 1000);
function getTimer() {
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth() + 1;
var dates = time.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = time.getDay();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
div.innerHTML = year + '年' + month + '月' + dates + '日' + arr[day] + h + ':' + m + ':' + s;
}
</script>
</body>
分享