一 事件對象數組
1. 事件event:瀏覽器上的行爲。一個是mouse 一個是key瀏覽器
2. 須要去記下全部的mouse和key事件app
3. 每一個事件都是元素天生自帶的,每當咱們給這個事件綁定方法(函數)的時候,瀏覽器就會默認有一個參數叫mouseevent和keyevent。全部鼠標和鍵盤的信息都存在這個對象上。有兼容性??函數
(1) 嵌套元素的同一事件都綁定方法的時候,當觸發子元素的事件時,執行完畢會接着觸發父級元素身上的同一事件,這就叫冒泡。性能
(2) 取消冒泡的方法對象
ev.stopPropagation?ev.stopPropagation():ev.cancelBubble=true繼承
(3) 事件委託事件
子元素將本身的事件都委託給父級,點的時候仍是點子元素,可是這個方法綁在他的父級身上,而後父級經過ev.target找到這個事件時那個孩子委託的。資源
(1) 嵌套元素的同一事件都綁定方法的時候,當觸發子元素身上的事件時,會先執行父級的事件,而後依次傳遞執行子級的事件,和叫捕獲。路由
Div.onclick=function(){}
Div.addEventListener(「click」,function(){},false)
第二種的寫法ie不支持,ie有本身的寫法
Div.attachEvent(「onclick」,function(){})
(1) Div.onclick=null
(2) Div.removeEventListener(「click」,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()