瀏覽器的行爲

一 事件對象數組

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

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

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

相關文章
相關標籤/搜索