javascript中的窗体页面事件+自定义事件

页面离开时的confirm提示

window.onbeforeunload = function() {
 
    return '你确认要离开吗？';
  
};

页面加载完成的事件(在onload之后调用)

document.onreadystatechange = function()
{
       if(document.readyState=='complete')
       {
       
       }
}

meidaQueryChanged

var mql = window.matchMedia("(max-width: 700px)");
 // 指定回调函数 
 mql.addListener(mqCallback); 
 // 撤销回调函数 
 mql.removeListener(mqCallback); 
 function mqCallback(mql) {   
 if (mql.matches) {     
 // 宽度小于等于700像素   
 } else {    
  // 宽度大于700像素  
   }
 }

触摸事件

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

try doing it!