Javascript 頁面行爲事件&自定義事件

頁面行爲事件

定義：指窗體(window)和根頁面(document)的形態、狀態的改變觸發的時間，這裏主要指出典型的頁面行爲事件。

常見的頁面行爲事件

//阻塞詢問用戶
window.onbeforeunload = function() {  
 
    return '你確認要離開嗎？';
  
};

//沒法阻塞
window.onunload = function() {
 
    
  
};

//沒法阻塞
window.onclose = function() {
 
    
  
};
//沒法阻塞
window.onload = function(){

};

頁面加載完成的事件(在onload以後調用)

//頁面狀態事件
document.onreadystatechange = function(){

    if(document.readyState=='complete')
     {
       
     }
};

//頁面加載完最早調用的事件
document.addEventListener("DOMContentLoaded", functio(){

}, false);

 

頁面像素變化事件meidaQueryChanged

var mql = window.matchMedia("(max-width: 700px)"); //頂一個mediaQuery匹配對象，當匹配到當前media，則觸發回調
 // 指定回調函數 
mql.addListener(function(mql){   
   if (mql.matches) {   
  
     // 寬度小於等於700像素   
  } else {    
      // 寬度大於700像素  
      mql.removeListener(mqCallback); 
   }
 
});

 

移動頁面觸摸事件

function load (){

	document.addEventListener('touchstart',touch, false);
	document.addEventListener('touchmove',touch, false);
	document.addEventListener('touchend',touch, false);
	
	function touch (event){
		var event = event || window.event;
		
		var oInp = document.getElementById("inp");

		switch(event.type){
			case "touchstart":
				oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
				break;
			case "touchend":
				oInp.innerHTML = "
Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
				break;
			case "touchmove":
				event.preventDefault();
				oInp.innerHTML = "
Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
				break;
		}
		
	}
}
window.addEventListener('load',load, false);

 

html5滾輪控件  http://www.17sucai.com/pins/7750.html

 

~~~~~~~~~~~~~~~~~~~~2014-11-29 更新~~~~~~~~~~~~~~~~~~~~~~~

自定義事件

對於自定義事件，這是一個很時尚的詞彙，對於一個事件，他須要具有什麼樣的條件呢？

①使用特定的消息隊列,必須遵照先進先出的原則

②事件具備瞬時性，在特定的條件下，事件形成的結果不會持久化，除非特別的進行了保存

③事件必須可傳遞，可被攔截，能夠阻止瀏覽器默認行爲

④必須遵循3個階段的原則（根元素-*-*->目標元素的捕獲階段；目標元素的處理階段；目標元素-*-*->根元素冒泡階段），

其中第一階段對於非目標元素而言，並不自動（固然若是你喜歡的話其實也能夠捕獲）進行捕獲處理（這點比android好多了），

（注：在標準瀏覽器中，addEventListener的第三個參數 useCapture表示是否在捕獲階段捕獲，值爲true時在捕獲階段捕獲）

⑤必須可觸發dispatchEvent

自定義事件①

/**
 *自定義事件
 *
 **/
var myEvent = document.createEvent('CustomEvent'); 

myEvent.initCustomEvent('myevent',true,false,{name:'張三'});
//參數1表示事件的名稱，參數二表示是否可冒泡，參數三表示是否可取消

element.addEventListener('myevent', function(event) {
   
    console.log('Hello ' + event.detail.name);
    
 }); 
 
element.dispatchEvent(myEvent);

 

注意：createEvent的參數必須參考以下表格

自定事件②

此外，還有一種自定義事件的方式

document.addEventListener('look',function(){

 console.log('look me !');

},false);

var ev = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(ev);

 

try doing it!