【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);