JavaScript九 - BOM

12.1 常用鍵盤事件

12.1.1 鍵盤事件

[圖片上傳失敗...(image-693324-1606925616494)]

[圖片上傳失敗...(image-1b70af-1606925616494)]

<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>

12.1.2 鍵盤事件對象

[圖片上傳失敗...(image-be34e1-1606925616494)]

在 JavaScript中,當用戶操作鍵盤時,會觸發鍵盤事件,鍵盤事件主要包括下面 3 種類型:

  • keydown:在鍵盤上按下某個鍵時觸發。如果按住某個鍵,會不斷觸發該事件,但是 Opera 瀏覽器不支持這種連續操作。該事件處理函數返回 false 時,會取消默認的動作(如輸入的鍵盤字符,在 IE 和 Safari 瀏覽器下還會禁止keypress 事件響應)。
  • keypress:按下某個鍵盤鍵並釋放時觸發。如果按住某個鍵,會不斷觸發該事件。該事件處理函數返回 false 時,會取消默認的動作(如輸入的鍵盤字符)。
  • keyup:釋放某個鍵盤鍵時觸發。該事件僅在鬆開鍵盤時觸發一次,不是一個持續的響應狀態。

當獲取用戶正按下鍵碼時,可以使用 keydown、keypress 和 keyup 事件獲取這些信息。其中 keydown 和 keypress 事件基本上是同義事件,它們的表現也完全一致,不過一些瀏覽器不允許使用 keypress 事件獲取按鍵信息。所有元素都支持鍵盤事件,但鍵盤事件多被應用在表單輸入中。


12.1.3 案例講解-模擬京東按鍵輸入內容

當我們按下 s 鍵, 光標就定位到搜索框(文本框獲得焦點)。

[圖片上傳失敗...(image-b16518-1606925616494)]

注意:觸發獲得焦點事件,可以使用 元素對象.focus()

<input type="text">
  <script>
  // 獲取輸入框
  var search = document.querySelector('input');
// 給document註冊keyup事件
document.addEventListener('keyup', function(e) {
  // 判斷keyCode的值
  if (e.keyCode === 83) {
    // 觸發輸入框的獲得焦點事件
    search.focus();
  }
})
</script>

12.1.4 案例講解-模擬京東快遞單號查詢

要求:當我們在文本框中輸入內容時,文本框上面自動顯示大字號的內容。

[圖片上傳失敗...(image-514e70-1606925496365)]

[圖片上傳失敗...(image-e68d7f-1606925496365)]

<div class="search">
  <div class="con">123</div>
<input type="text" placeholder="請輸入您的快遞單號" class="jd">
  </div>
<script>
  // 獲取要操作的元素
  var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
// 給輸入框註冊keyup事件
jd_input.addEventListener('keyup', function() {
  // 判斷輸入框內容是否爲空
  if (this.value == '') {
    // 爲空,隱藏放大提示盒子
    con.style.display = 'none';
  } else {
    // 不爲空,顯示放大提示盒子,設置盒子的內容
    con.style.display = 'block';
    con.innerText = this.value;
  }
})
// 給輸入框註冊失去焦點事件,隱藏放大提示盒子
jd_input.addEventListener('blur', function() {
  con.style.display = 'none';
})
// 給輸入框註冊獲得焦點事件
jd_input.addEventListener('focus', function() {
  // 判斷輸入框內容是否爲空
  if (this.value !== '') {
    // 不爲空則顯示提示盒子
    con.style.display = 'block';
  }
})
</script>

12.2 BOM

12.2.1 什麼是BOM

BOM(Browser Object Model)即瀏覽器對象模型,它提供了獨立於內容而與瀏覽器窗口進行交互的對象,其核心對象是 window。

BOM 由一系列相關的對象構成,並且每個對象都提供了很多方法與屬性。

BOM 缺乏標準,JavaScript 語法的標準化組織是 ECMA,DOM 的標準化組織是 W3C,BOM 最初是Netscape 瀏覽器標準的一部分。

[圖片上傳失敗...(image-bda274-1606925496365)]

12.2.2 BOM的構成

BOM 比 DOM 更大,它包含 DOM。

[圖片上傳失敗...(image-f38239-1606925496365)]

12.2.3 頂級對象window

[圖片上傳失敗...(image-aba88-1606925496365)]

12.2.4 window對象的常見事件

頁面(窗口)加載事件(2種)

第1種

[圖片上傳失敗...(image-93adf0-1606925496365)]

window.onload 是窗口 (頁面)加載事件,當文檔內容完全加載完成會觸發該事件(包括圖像、腳本文件、CSS 文件等), 就調用的處理函數。

[圖片上傳失敗...(image-39df69-1606925496365)]

第2種

[圖片上傳失敗...(image-a6ee9-1606925496365)]

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>

12.3 定時器

12.3.1 setTimeout

window 對象給我們提供了 2 個非常好用的方法-定時器。

  • setTimeout()

  • setInterval()

12.3.2 開啓定時器

[圖片上傳失敗...(image-1d0f8a-1606925496365)]

[圖片上傳失敗...(image-831c45-1606925496365)]

[圖片上傳失敗...(image-7091e1-1606925496365)]

12.3.3 案例講解-五秒後關閉廣告

[圖片上傳失敗...(image-9eaf66-1606925496365)]

[圖片上傳失敗...(image-546789-1606925496365)]

<body>
    <img src="images/ad.jpg" alt="" class="ad">
    <script>
        // 獲取要操作的元素
        var ad = document.querySelector('.ad');
        // 開啓定時器
        setTimeout(function() {
            ad.style.display = 'none';
        }, 5000);
    </script>
</body>

12.3.4 停止定時器

[圖片上傳失敗...(image-981fce-1606925496365)]

[圖片上傳失敗...(image-3a5857-1606925496365)]

<button>點擊停止定時器</button>
<script>
  var btn = document.querySelector('button');
// 開啓定時器
var timer = setTimeout(function() {
  console.log('爆炸了');
}, 5000);
// 給按鈕註冊單擊事件
btn.addEventListener('click', function() {
  // 停止定時器
  clearTimeout(timer);
})
</script>

12.3.5 setInterval

setInterval() 方法可按照指定的週期(以毫秒計)來調用函數或計算表達式。

setInterval() 方法會不停地調用函數,直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。

12.3.6 開啓定時器

[圖片上傳失敗...(image-53e2a9-1606925496365)]

<script>
  // 1. setInterval 
  setInterval(function() {
  console.log('繼續輸出');
}, 1000);
</script>

12.3.7 案例講解-倒計時

[圖片上傳失敗...(image-9677f9-1606925496365)]

[圖片上傳失敗...(image-66f63-1606925496365)]

<div>
  <span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
  // 1. 獲取元素(時分秒盒子) 
  var hour = document.querySelector('.hour'); // 小時的黑色盒子
var minute = document.querySelector('.minute'); // 分鐘的黑色盒子
var second = document.querySelector('.second'); // 秒數的黑色盒子
var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用戶輸入時間總的毫秒數

countDown(); // 我們先調用一次這個函數,防止第一次刷新頁面有空白 

// 2. 開啓定時器
setInterval(countDown, 1000);

function countDown() {
  var nowTime = +new Date(); // 返回的是當前時間總的毫秒數
  var times = (inputTime - nowTime) / 1000; // times是剩餘時間總的秒數 
  var h = parseInt(times / 60 / 60 % 24); //時
  h = h < 10 ? '0' + h : h;
  hour.innerHTML = h; // 把剩餘的小時給 小時黑色盒子
  var m = parseInt(times / 60 % 60); // 分
  m = m < 10 ? '0' + m : m;
  minute.innerHTML = m;
  var s = parseInt(times % 60); // 當前的秒
  s = s < 10 ? '0' + s : s;
  second.innerHTML = s;
}
</script>

12.3.8 停止定時器

[圖片上傳失敗...(image-b80b6f-1606925496365)]

12.3.9 案例講解-發送短信倒計時

點擊按鈕後,該按鈕60秒之內不能再次點擊,防止重複發送短信。

[圖片上傳失敗...(image-b37d75-1606925496365)]

[圖片上傳失敗...(image-c88ff1-1606925496365)]

手機號碼: <input type="number"> <button>發送</button>
<script>
  var btn = document.querySelector('button');
// 全局變量,定義剩下的秒數
var time = 3; 
// 註冊單擊事件
btn.addEventListener('click', function() {
  // 禁用按鈕
  btn.disabled = true;
  // 開啓定時器
  var timer = setInterval(function() {
    // 判斷剩餘秒數
    if (time == 0) {
      // 清除定時器和復原按鈕
      clearInterval(timer);
      btn.disabled = false;
      btn.innerHTML = '發送';
    } else {
      btn.innerHTML = '還剩下' + time + '秒';
      time--;
    }
  }, 1000);
});
</script>

12.4 this指向

12.4.1 全局環境

this的指向在函數定義的時候是確定不了的,只有函數執行的時候才能確定this到底指向誰,一般情況下this的最終指向的是那個調用它的對象。

現階段,我們先了解一下幾個this指向

  1. 全局作用域或者普通函數中this指向全局對象window(注意定時器裏面的this指向window)

  2. 方法調用中誰調用this指向誰

  3. 構造函數中this指向構造函數的實例

<button>點擊</button>
<script>
  // this 指向問題 一般情況下this的最終指向的是那個調用它的對象
  // 1. 全局作用域或者普通函數中this指向全局對象window( 注意定時器裏面的this指向window)
  console.log(this);
function fn() {
  console.log(this);
}
window.fn();
window.setTimeout(function() {
  console.log(this);
}, 1000);
// 2. 方法調用中誰調用this指向誰
var o = {
  sayHi: function() {
    console.log(this); // this指向的是 o 這個對象
  }
}
o.sayHi();
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
  console.log(this); // 事件處理函數中的this指向的是btn這個按鈕對象
})
// 3. 構造函數中this指向構造函數的實例
function Fun() {
  console.log(this); // this 指向的是fun 實例對象
}
var fun = new Fun();
</script>

12.4.2 函數環境

  1. 方法調用中誰調用this指向誰
  2. 構造函數中this指向構造函數的實例

12.4.3 作爲DOM事件處理函數

事件處理函數中的this指向的是btn這個按鈕對象

​ var btn = document.querySelector('button');
​ btn.addEventListener('click', function() {
​ console.log(this);
​ })

12.4.4 作爲內聯事件處理函數

<div onclick="fn1(this)" ></div>

this 指向當前的dom節點

12.4.5 setTimeout

setInterval和setTimeout中傳入函數時,函數中的this會指向window對象

var num = 0;
function Obj (){
    this.num = 1,
    this.getNum = function(){
        console.log(this.num);
    },
    this.getNumLater = function(){
        setTimeout(function(){
            console.log(this.num);
        }, 1000)
    }
}
var obj = new Obj; 
obj.getNum();//1  打印的是obj.num,值爲1
obj.getNumLater()//0  打印的是window.num,值爲0

12.4.6 setInterval

setInterval和setTimeout中傳入函數時,函數中的this會指向window對象

var num = 0;
function Obj (){
    this.num = 1,
    this.getNum = function(){
        console.log(this.num);
    },
    this.getNumLater = function(){
        seInterval(function(){
            console.log(this.num);
        }, 1000)
    }
}
var obj = new Obj; 
obj.getNum();//1  打印的是obj.num,值爲1
obj.getNumLater()//0  打印的是window.num,值爲0

12.5 JS執行機制

12.5.1 JS 是單線程

[圖片上傳失敗...(image-62070a-1606925496365)]

    單線程就意味着,所有任務需要排隊,前一個任務結束,纔會執行後一個任務。如果前一個任務耗時很長,後一個任務就不得不一直等着。
    這樣所導致的問題是: 如果 JS 執行的時間過長,這樣就會造成頁面的渲染不連貫,導致頁面渲染加載阻塞的感覺。

12.5.2 同步任務和異步任務

單線程導致的問題就是後面的任務等待前面任務完成,如果前面任務很耗時(比如讀取網絡數據),後面任務不得不一直等待!!

爲了解決這個問題,利用多核 CPU 的計算能力,HTML5 提出 Web Worker 標準,允許 JavaScript 腳本創建多個線程,但是子線程完全受主線程控制。於是,JS 中出現了同步任務和異步任務。

前一個任務結束後再執行後一個任務,程序的執行順序與任務的排列順序是一致的、同步的。比如做飯的同步做法:我們要燒水煮飯,等水開了(10分鐘之後),再去切菜,炒菜。

你在做一件事情時,因爲這件事情會花費很長時間,在做這件事的同時,你還可以去處理其他事情。比如做飯的異步做法,我們在燒水的同時,利用這10分鐘,去切菜,炒菜。

12.5.3 JS執行機制(事件循環)

[圖片上傳失敗...(image-ae93a8-1606925496365)]

[圖片上傳失敗...(image-c317d2-1606925496365)]

[圖片上傳失敗...(image-d61bdf-1606925496365)]

12.5.4 案例分析-代碼思考題

 console.log(1);
 document.onclick = function() {
   console.log('click');
 }

 setTimeout(function() {
   console.log(3)
 }, 3000)
 console.log(2);

12.6 location對象

12.6.1 什麼是 location 對象

[圖片上傳失敗...(image-93db4f-1606925496365)]

12.6.2 URL

[圖片上傳失敗...(image-8fbd2f-1606925496365)]

[圖片上傳失敗...(image-6e307c-1606925496365)]

12.6.3 location 對象的屬性

[圖片上傳失敗...(image-f3ca08-1606925496365)]

[圖片上傳失敗...(image-d49882-1606925496365)]

12.6.4 案例講解-5分鐘自動跳轉頁面

[圖片上傳失敗...(image-523a50-1606925496365)]

[圖片上傳失敗...(image-547a5-1606925496365)]

    <button>點擊</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            // console.log(location.href);
            location.href = 'http://www.itcast.cn';
        })
        var timer = 5;
        setInterval(function() {
            if (timer == 0) {
                location.href = 'http://www.itcast.cn';
            } else {
                div.innerHTML = '您將在' + timer + '秒鐘之後跳轉到首頁';
                timer--;
            }
        }, 1000);
    </script>

12.6.5 案例講解-獲取URL參數

[圖片上傳失敗...(image-8780c3-1606925496365)]

[圖片上傳失敗...(image-2628af-1606925496365)]

    <div></div>
    <script>
        console.log(location.search); // ?uname=andy
        // 1.先去掉?  substr('起始的位置',截取幾個字符);
        var params = location.search.substr(1); // uname=andy
        console.log(params);
        // 2. 利用=把字符串分割爲數組 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var div = document.querySelector('div');
        // 3.把數據寫入div中
        div.innerHTML = arr[1] + '歡迎您';
    </script>

12.6.6 location對象的常見方法

[圖片上傳失敗...(image-56aff1-1606925496365)]

    <button>點擊</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 記錄瀏覽歷史,所以可以實現後退功能
            // location.assign('http://www.itcast.cn');
            // 不記錄瀏覽歷史,所以不可以實現後退功能
            // location.replace('http://www.itcast.cn');
            location.reload(true);
        })
    </script>

12.6.7 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 = "";     //電腦
 }

12.6.8 history對象

window對象給我們提供了一個 history對象,與瀏覽器歷史記錄進行交互。該對象包含用戶(在瀏覽器窗口中)訪問過的URL。

[圖片上傳失敗...(image-949361-1606925496365)]

history對象一般在實際開發中比較少用,但是會在一些 OA 辦公系統中見到。

[圖片上傳失敗...(image-8e5490-1606925496365)]

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章