1. 程式人生 > >【js操作dom物件學習筆記五之事件冒泡、location物件、history物件、定時器】

【js操作dom物件學習筆記五之事件冒泡、location物件、history物件、定時器】

1.總結addEventListener()和attachEvent()的區別      相同點:都可以為元素繫結事件   不同點:1.方法名不一樣          2.引數的個數不一樣addEventListener三個引數,attachEvent兩個引數          3.addEventListener 谷歌,火狐,ie11支援,ie8不支援        attachEvent 谷歌火狐不支援,ie11不支援,ie8支援      4.this 不同 addEventListener中的this是當前繫結事件的物件         attachEvent中的this是widow      5.addEventListener中事件的型別(事件的名字)沒有on        attachEvent中的事件型別(事件的名字)有on

2.解綁事件     物件.on事件名字=事件處理函式--->繫結事件         物件.on事件名字=null;

    物件.addEventListener("沒有on的事件型別",命名函式,false);--繫結事件     物件.removeEventListener("沒有on的事件型別",函式名字,false);

    物件.attachEvent("on事件型別",命名函式);---繫結事件     物件.detachEvent("on事件型別",函式名字);

3.事件冒泡     多個元素巢狀,有層次關係,這些元素都註冊了相同的事件,如果裡面的元素的事件觸發了,外面的元素的該事件自動的觸發了

4.阻止事件冒泡     ie:window.event.cancelBubble=true;     谷歌、火狐 e.stopPropagation();

5.事件捕獲階段:從外向內   事件目標階段:最開始選擇的那個   事件冒泡階段:從裡向外

  通過e.eventPhase這個屬性可以知道當前的事件是什麼階段   1---->捕獲階段   2---->目標階段   3---->冒泡   一般預設都是冒泡階段,很少用捕獲階段

6.鍵盤擡起事件   onkeyup

================================= bom

1.頁面載入完畢   window.onload=function(){}

2.頁面關閉後才觸發的事件   window.onunload=function(){} 3.頁面關閉之前觸發的   window.onbeforeunload=function(){}

4.location物件   window.location.hash   --->位址列上#及後面的內容   window.location.host   ---->主機名及埠號   window.location.hostname --->主機名   window.location.pathname ----->檔案的路徑--相對路徑   window.location.port     ----->埠號   window.location.protocol ------>協議   window.location.search   ------>搜尋的內容

  設定跳轉的頁面的地址   location.href="http://www.jd.com";(重要)   location.reload();//重新載入--重新整理

5.history物件   前進(瀏覽器的前進按鈕)   window.history.forward();     後退   window.history.back();

6.navigator物件   通過platform可以判斷瀏覽器所在的系統平臺型別   window.navigator.platform

7.定時器(兩個)  (1)setInterval(常用的 反覆的執行)   引數1:函式   引數2:時間---毫秒--1000毫秒--1秒   執行過程:頁面載入完畢後,過了一秒執行一次函式程式碼,又過了一秒執行函式程式碼   返回值就是定時器的id值      var timeId =setInterval(function(){alert("hello")},1000);

  停止定時器   引數:要清理的定時的id的值   window.clearInterval(timeId)     (2)一次性定時器setTimeout    var timeId = window.setTimeout(function(){ alert("你好");},1000);

   清除定時器clearTimeout(timeId);