瀏覽器的行爲

一 事件對象

1. 事件event：瀏覽器上的行爲。一個是mouse 一個是key

2. 須要去記下全部的mouse和key事件

3. 每一個事件都是元素天生自帶的，每當咱們給這個事件綁定方法（函數）的時候，瀏覽器就會默認有一個參數叫mouseevent和keyevent。全部鼠標和鍵盤的信息都存在這個對象上。有兼容性？？

1. event不同須要統一  var ev=ev||window.event
2. 事件源不統一  ev.srcElement||ev.target
3. 事件冒泡

(1) 嵌套元素的同一事件都綁定方法的時候，當觸發子元素的事件時，執行完畢會接着觸發父級元素身上的同一事件，這就叫冒泡。

(2) 取消冒泡的方法

ev.stopPropagation？ev.stopPropagation():ev.cancelBubble=true

(3) 事件委託

子元素將本身的事件都委託給父級，點的時候仍是點子元素，可是這個方法綁在他的父級身上，而後父級經過ev.target找到這個事件時那個孩子委託的。

 

 

 

1. 阻止事件默認行爲
2. 事件捕獲

(1) 嵌套元素的同一事件都綁定方法的時候，當觸發子元素身上的事件時，會先執行父級的事件，而後依次傳遞執行子級的事件，和叫捕獲。

1. 給元素事件綁定方法 

Div.onclick=function(){}

Div.addEventListener(「click」,function(){},false)

第二種的寫法ie不支持，ie有本身的寫法

Div.attachEvent(「onclick」,function(){})

1. 給元素取消事件

(1) Div.onclick=null

(2) Div.removeEventListener(「click」,fn,false)

注意：若是取消事件，三個參數和定義的三個參數必須一一對應，且不能使用匿名函數

 

針對事件對象案例是拖拽

 

取消事件

1. div.onclick=null
2. Div.removeEventListener(「click」,fn,false)
3. div.detachEvent(「onclick」,fn,false)

DOM迴流

一個父級原先有三個div,當咱們經過DOM操做給追加第四個div時，瀏覽器會從新加載前三個div，當追加第五個div，瀏覽器會再次從新加載前四個，當追加第六個時，瀏覽器會再次從新加載前五個div。這種現象叫DOM迴流。會影響頁面總體性能，消耗資源。

解決DOM迴流的方法用文檔碎片。

案例分析

若是給一個父級的全部子元素添加同一個事件，儘可能不要獲取全部的子元素經過for循環去添加事件，會形成DOM迴流，用事件委託的方法去添加事件。

案例 拖拽 放大鏡原理  碰撞檢測  碰撞交換位置

 

二 類

什麼是類？分兩種 一種是瀏覽器自帶的(Function，Math，Date，RegExp，String，Array，Number，Boolean)，一種是人爲定義的（function Person(){}/class Person{}）。

基類:Object

 

案例分析 數組爲例

定義數組的方法

Var a=[12,23]   自變量定義

Var a=new Array(12,56)  類的實例化

三 apply call  bind 繼承

會使用它們三就行

 

 

 

四 BOM

瀏覽器對象模型，本質也是一個對象，而這個對象的大量方法都存在window下

Window.open(參數1，參數2)

參數1是地址 可選 若是是空白 表明打開一個空白頁

 

參數2 是打開方式 是當前頁打開仍是新建一個頁面打開

若是是空 表示打開一個新前頁  _self 打開當前的

 

 

Window.close() 只能關閉靠open打開的頁面

 

 

瀏覽器用戶信息

Window.navigator.userAgent

瀏覽器地址信息

Window.location

Window.location這個屬性又是一個對象

Window.location.href整個地址

Window.location.search get提交的參數

Window.location.hash 哈希值 作路由的

 

 

瀏覽器的歷史記錄

Window.history

前進

Window.history.forward()

前進的是最新打開的那個頁面

後退

Window.history.back()