鍵盤事件&BOM
技術標籤：JavaScriptjavascript
鍵盤事件
常用的三個
- onkeyup：當某個按鍵被鬆開的時候後觸發
- onkeydown：當某個按鍵被按下的時候觸發
- onkeypress：當某個按鍵被按下的時候觸發，不識別功能按鈕(方向鍵、shift)
注意：
-
如果使用addEventListener不需要加on
-
onkeypress和前面的兩個事件區別在於它不識別功能鍵
-
三個時間的觸發順序是：keydown–keypress–keyup
<script> // 常用的鍵盤事件 //1. keyup 按鍵彈起的時候觸發 document.addEventListener('keyup', function() { console.log('我彈起了'); }) //3. keypress 按鍵按下的時候觸發 不能識別功能鍵 比如 ctrl shift 左右箭頭啊 document.addEventListener('keypress', function() { console.log('我按下了press'); }) //2. keydown 按鍵按下的時候觸發 能識別功能鍵 比如 ctrl shift 左右箭頭啊document.addEventListener('keydown', function() { console.log('我按下了down'); }) // 4. 三個事件的執行順序 keydown -- keypress -- keyup </script>
鍵盤事件物件
屬性
KeyCode：返回該鍵的ASCII碼值
- keydown和keyup事件物件是同樣的，事件不區分字母大小寫(大寫)，keypress會區別大小寫
- 在實際開發中，使用更多的是keydown和keyup，能夠識別所有按鍵
- keypress識別大小寫返回大小寫不同的ASCII碼
作用：使用keyCode屬性判斷使用者的按鍵操作
<script>
// 鍵盤事件物件中的keyCode屬性可以得到相應鍵的ASCII碼值
document.addEventListener('keyup', function(e) {
console.log('up:' + e.keyCode);
// 我們可以利用keycode返回的ASCII碼值來判斷使用者按下了那個鍵
if (e.keyCode === 65) {
alert('您按下的a鍵');
} else {
alert('您沒有按下a鍵')
}
})
document.addEventListener('keypress', function(e) {
// console.log(e);
console.log('press:' + e.keyCode);
})
</script>
事件冒泡和預設事件
- 阻止預設事件：e.preventDefault();
- 阻止事件冒泡：e.stopPropagation();
- 兩個都阻止： return false;(原生JS裡面無法阻止事件冒泡)
案例
-
模仿京東搜尋欄按下S鍵游標進入
<input type="text"> <script> // 實現思路 // 檢測使用者是否按下了S鍵，如果按下了將游標定位到搜尋框裡面 window.onload=function(){ // 【1】先獲取搜尋框 var search=document.querySelector("input"); // 【2】給document新增keyup事件 document.addEventListener("keyup",function(e){ // 【3】獲取並判斷按下的鍵值是不是S if(e.keyCode===83){ // 【4】設定游標到搜尋框內部 search.focus(); } }) } </script> -
快遞單查詢案例
<div class="base"> <div class="content">123</div> <input type="text" class="search" placeholder="請輸入您的快遞單號"> </div> <script> // 快遞單號輸入內容時，上面的大號盒子顯示 // 表單檢測使用者的輸入操作，給表單新增鍵盤事件 // 當用戶輸入單號時，將表單裡面的value值同時賦給content盒子，innerText window.onload=function(){ var div=document.querySelector(".content"); var txt=document.querySelector(".search"); txt.addEventListener("keyup",function(){ if(txt.value==""){ div.style.display="none"; }else{ div.style.display="block"; div.innerText=this.value; } }); txt.addEventListener("blur",function(){ div.style.display="none"; }); txt.addEventListener("focus",function(){ if(txt.value!=""){ div.style.display="block"; } }) } </script>
BOM模組
什麼是BOM
瀏覽器物件模型，提供了一些獨立於內容頁面與瀏覽器視窗進行互動的物件介面，它的核心是window物件
BOM也是由一系列相關的物件組成，並且每個獨享都提供了很多方法和屬性
但是BOM缺少標準化，JS的語法的標準化是ECMA組織提出的，DOM的標準化組織W3C，BOM最初始Netscape瀏覽器標準的一部分。
DOM和BOM
DOM
- 文件物件模型
- DOM將文件當做一個物件來處理
- DOM的頂級物件是document
- 主要學習的是對頁面元素的操作
- DOM是W3C標準規範
BOM
- 瀏覽器物件模型
- 將瀏覽器當做一個物件來處理
- BOM的頂級物件是window
- 學習的是瀏覽器視窗互動的一些物件
- 是瀏覽器廠家在格子瀏覽器上定義的規範
BOM的構成
BOM是比DOM更大的盒子物件
window物件：document、location、navigation、screen、history
頂級物件window
window物件是瀏覽器的頂級物件，具有雙重角色
- 是JS訪問瀏覽器視窗的一個介面
- 是一個全域性物件，宣告的所有的全域性變數，全域性方法函式最終都是window物件的屬性或者方法
注意：理解為全域性的變數和方法函式在呼叫的時候其實是省略了window.操作
Window物件的常見事件
視窗載入事件（2種）
第一種：
window.onload=function(){}
或者
window.addEventListener("load",function(){});
onload事件是頁面的載入事件，當文件內容(包含影象、指令碼檔案、css檔案等)全部載入完成會觸發的事件
第二種：
document.addEventListener('DOMContentLoaded',function(){})
DOMContentLoaded 事件觸發時，僅當DOM載入完成，不包括樣式表，圖片，flash等等。
IE9以上才支援！！！
如果頁面的圖片很多的話, 從使用者訪問到onload觸發可能需要較長的時間, 互動效果就不能實現，必然影響使用者的體驗，此時用 DOMContentLoaded 事件比較合適。
<script>
window.addEventListener('load', function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('點選我');
})
})
window.addEventListener('load', function() {
alert(22);
})
document.addEventListener('DOMContentLoaded', function() {
alert(33);
})
</script>
調整視窗大小事件
window.onresize=function(){}
window.addEventListener("resize",function(){});
window.onresize 是調整視窗大小載入事件, 當觸發時就呼叫的處理函式。
注意：
-
只要視窗大小發生畫素變化，就會觸發這個事件。
-
我們經常利用這個事件完成響應式佈局。 window.innerWidth 當前螢幕的寬度
<script> // 註冊頁面載入事件 window.addEventListener('load', function() { var div = document.querySelector('div'); // 註冊調整視窗大小事件 window.addEventListener('resize', function() { // window.innerWidth 獲取視窗大小 console.log('變化了'); if (window.innerWidth <= 800) { div.style.display = 'none'; } else { div.style.display = 'block'; } }) }) </script> <div></div>
文件載入事件
window.addEventListener("DOMContentLoaded",function(){
console.log(document.querySelector("h1"));
})
DOMContentLoaded也是一個載入事件，文件載入事件，只需要考慮DOM元素(不包含圖片、css、flash等)載入完成，IE9以上
定時器事件(兩種)
setTimeout();
serInterval();
setTimeout()定時炸彈
使用時指定一個時間段，只要時間到了直接執行繫結函式
window.setTimeout(function(){
alert("hello");
},3000)
第一個引數：事件所執行的函式；
第二個引數：時間間隔以毫秒為單位
setTimeout()這個呼叫函式我們也稱為回撥函式callback
注意：
-
繫結函式，回撥函式callback，這個函式可以直接寫在方法引數所在位置，還可以採取字串"函式名()"，還可以直接寫函式名，三種呼叫方式，不推薦使用字串方式
-
延遲的毫秒數可以省略，預設為0，如果寫必須是毫秒
-
如果定時器比較多的話，可以給每個定時器一個識別符號
<script> // 回撥函式是一個匿名函式 setTimeout(function() { console.log('時間到了'); }, 2000); function callback() { console.log('爆炸了'); } // 回撥函式是一個有名函式 var timer1 = setTimeout(callback, 3000); var timer2 = setTimeout(callback, 5000); </script>
停止定時器
window.clearTimeout(second);
方法取消了先前通過呼叫setTimeout建立的定時器，引數就是要停止的定時器的識別符號
serInterval()鬧鐘定時器
開啟定時器
window.setInterval(回撥函式，（）間隔的毫秒數)；
使用時指定一個時間段，然後每隔這個時間段都會呼叫一次回撥函式
var i=0;
window.setInterval(function(){
console.log(i);
i++;
},1000);
哪怕是第一次執行回撥函式也是在時間到了之後執行的
停止定時器
window.clearInterval(id)
location物件
location物件介紹
window物件給我們提供了一個location屬性，這個物件主要用於獲取或設定窗體的url地址，並且可以用於解析url。
URL
統一資源定位符(Uniform Resource Location)是網際網路上的標準資源地址，網路所有的資料都以檔案形式儲存，每個檔案在網路世界中都有一個唯一的URL，它包含的資訊指出檔案的所在位置及瀏覽器的處理方式
url語法：
protocol://host[:port]/path/…
http://www.yltedu.com/…
protocol:協議型別，通訊協議http、ftp、mailto等
host:主機名稱(域名)
port：埠號可選，如果省略使用的是預設的埠，http預設的埠號是 80
path：路徑由0個或多個"/"+檔案地址等組成，表示主機上的檔案地址目錄
屬性
- href：獲取或設定一個url
- host：返回主機(域名)
- port：返回埠號，如果未寫返回空字串
- pathname：返回路徑
- search：返回引數，URL引數是指URL地址中網址之後的?以後
- hash：返回片段，URL中#後面的內容
方法
- assign()：和href一樣，可以跳轉頁面，重定向跳轉
- replace()：替換當前頁面，不記錄入歷史中，所以不能後退頁面
- reload()：重新載入頁面，相當於重新整理按鈕，如果引數為true相當於強制重新整理
navigation物件
navigation物件主要是記錄有關瀏覽器的資訊，常用的屬性userAgent，這個屬性可以返回由客戶端傳送至伺服器的user-agent頭部的值
history物件
window物件為提供的一個history物件來進行與瀏覽器的歷史記錄進行互動，
常見用法
- back()：實現瀏覽器後退功能
- forward()：實現瀏覽器的前進功能
- go(引數)：前進後退功能，引數如果是1前進一個頁面，如果是-1後退一個頁面，如果是N則前進或後退N個頁面