如何從地址欄抽取對象

GIF/1K

1. 打開和關閉窗口

2. history，location

3. ***定時器

4. navigator

5. ***event

1. 打開和關閉窗口:

window.open("url","name")

name屬性: 每個窗口都有一個name屬性

在內存中唯一標識一個窗口

瀏覽器要求，相同name屬性的窗口只能打開一個，後打開的新窗口會覆蓋先打開的同名窗口

其實: open的第二個參數和a元素的target屬性值，都是name屬性

三種情況:

1. 如果使用自定義的name值，則在新窗口打開，只能打開一個

2. 如果使用_self，則新窗口替換當前窗口:

_self的意思是，使用當前窗口自己的name值，打開新窗口

3. 如果使用_blank，則在新窗口打開，可隨意打開多個

_blank的意思是，不指定name值，瀏覽器會隨機分配name值，幾乎不會重複。

2. history和location

history: 保存當前窗口打開後，成功訪問過的url的歷史記錄棧

如何: history.go(n)

.go(1) 前進一次

.go(0) 刷新

.go(-1) 後退一次

.go(-2) 後退兩次

location: 保存當前窗口正在打開的url的對象

屬性:

.href: 獲得完整url

.protocol: 協議

.host: 主機名+埠號

.hostname: 主機名

.port: 埠號

.pathname: 相對路徑

.hash: 錨點地址

.search: 查詢字元串

打開新鏈接, 可以後退:

location.assign("url") location.href="url"

open("url","_self")

其實可以更簡單: location="url"

打開新鏈接，禁止後退:

location.replace(url)

用新的url代替history中當前url記錄

刷新:

普通刷新: 優先從本地緩衝獲取文件，如果緩存沒有或過期，才從伺服器下載新文件

history.go(0)

F5

location.reload(/*false*/) 不強迫

強制刷新: 跳過本地緩存，始終從伺服器獲取新文件

location.reload(true) 強迫

3. ***定時器: 2種:

1. 周期性定時器:

什麼是: 讓程序每隔一段時間間隔，自動反覆執行一項任務

何時: 讓程序每隔一段時間間隔，自動反覆執行一項任務時

如何: 3件事:

1. 任務函數: 定時器反覆調用的函數

2. 啟動定時器: var timer=setInterval(task,ms)

創建一個新定時器對象，每隔ms毫秒，反覆自動調用task函數

其中: 返回定時器序號timer，專用於停止定時器

3. 停止定時器: clearInterval(timer)

問題: 不能自動清除timer中殘留的序號

強烈建議: 手動timer=null

2中方式:

1. 用戶手動操作

2. 自動停止:

在任務函數中設定臨界值

如果到達臨界值，則自動調用clearInterval

2. 一次性定時器:

什麼是: 先等待一段時間，再自動執行一次任務，執行後自動停止

何時: 延遲執行一項任務時

如何: 3件事:

1. 任務函數:

2. 啟動定時器: var timer=setTimeout(task,ms)

先等待ms毫秒，再執行一次task，執行後自動停止

3. 停止定時器: clearTimeout(timer)

建議: timer=null

定時器的原理:

setXXX(task,ms)

在主程序之外，創建定時器對象，保存回調函數task

定時器對象根據ms，決定何時自動調用task函數

定時器調用task函數時，無權立刻直接調用task，必須先將task加入回調隊列中等待。

等待主程序全部執行完，回調隊列中的函數，才能執行

4. ***event

什麼是事件: 瀏覽器自動觸發的，或用戶手動觸發的頁面狀態改變

什麼是事件處理函數: 當事件發生時，自動調用的函數

綁定事件處理函數: 將一個函數，賦值給元素的事件屬性

當事件發生時，自動調用函數

如何綁定: 3種:

1. 在HTML中:

問題: 不符合內容與行為分離的元素，不便於維護和重用

2. 在js中, 用賦值方式綁定:

elem.on事件名=function(){

this->當前觸發事件的元素elem

}

問題: 一個事件屬性，只能綁定一個處理函數

3. 在js中, 用addEventListener

elem.addEventListener("事件名",fun)

優: 一個事件屬性，可同時添加多個事件監聽

解除綁定: elem.removeEventListener("事件名",fun)

強調: 如果處理函數可能解綁，就必須用有名稱的函數來綁定。解除時，才能用函數名解除綁定。

因為，解除綁定時，要求，必須指定原函數對象

事件模型: 3個階段:

1. 捕獲: 由外向內，依次記錄各級父元素上綁定的相同事件的處理函數

2. 目標觸發: 優先觸發目標元素上綁定的處理函數

目標元素: 最初，實際觸發事件的元素

3. 冒泡: 由內向外，按照捕獲階段記錄的反向，依次觸發各級父元素上綁定的處理函數

事件對象:

什麼是: 事件發生時，自動創建的，

封裝事件信息，並提供修改事件行為的API的對象

何時: 只要希望獲得事件中的信息，或希望修改事件的默認行為時

如何:

獲取: 默認，事件對象，總是作為處理函數的第一個參數自動傳入！

function 處理函數(e){

e->事件對象

}

API:

取消冒泡/阻止蔓延: e.stopPropagation()

利用冒泡:

優化: 盡量減少事件監聽的個數:

為什麼: 瀏覽器觸發事件靠遍歷，事件監聽越多，遍歷時間越長，導致響應速度變慢

如何: 利用冒泡:

如何利用: 如果多個平級子元素，要綁定相同的事件時，其實，只要在父元素綁一次，所有子元素，就可共用！

為什麼: 冒泡

2個難題:

1. 獲得目標元素:

錯誤: this, this已經指父元素，不再指子元素

正確: e.target 始終記錄著最初點擊的目標元素

2. 目標元素不一定是想要的:

在處理函數中，先判斷當前目標元素的特徵是否符合要求，再決定是否繼續執行。

阻止默認行為: e.preventDefault();

何時: 當事件具有的默認行為，不想要時

典型:

1. a元素作為按鈕時，會自動在地址欄添加#xxx錨點地址

2. 如果驗證未通過，則阻止表單自動提交

form.onsubmit事件: 在無論以任何方式正式提交表單之前，自動觸發。

3. H5中做拖拽之前，必須阻止瀏覽器默認的拖拽行為

（本文所有權歸作者所有，如需轉載請聯繫本平台。）

知道你會來

所以我一直在這裡等

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！