页面行为事件
定义：指窗体(window)和根页面(document)的形态、状态的改变触发的时间，这里主要指出典型的页面行为事件。
常见的页面行为事件
1//阻塞询问用户 2window.onbeforeunload = function() { 3 4 return '你确认要离开吗？'; 5 6}; 7 8//无法阻塞 9window.onunload = function() { 10 11 12 13}; 14 15//无法阻塞 16window.onclose = function() { 17 18 19 20}; 21//无法阻塞 22window.onload = function(){ 23 24};
页面加载完成的事件(在onload之后调用)
1//页面状态事件 2document.onreadystatechange = function(){ 3 4 if(document.readyState=='complete') 5 { 6 7 } 8}; 9 10//页面加载完最先调用的事件 11document.addEventListener("DOMContentLoaded", functio(){ 12 13}, false);
页面像素变化事件meidaQueryChanged
1var mql = window.matchMedia("(max-width: 700px)"); //顶一个mediaQuery匹配对象，当匹配到当前media，则触发回调 2 // 指定回调函数 3mql.addListener(function(mql){ 4 if (mql.matches) { 5 6 // 宽度小于等于700像素 7 } else { 8 // 宽度大于700像素 9 mql.removeListener(mqCallback); 10 } 11 12});
移动页面触摸事件
1function load (){ 2 3 document.addEventListener('touchstart',touch, false); 4 document.addEventListener('touchmove',touch, false); 5 document.addEventListener('touchend',touch, false); 6 7 function touch (event){ 8 var event = event || window.event; 9 10 var oInp = document.getElementById("inp"); 11 12 switch(event.type){ 13 case "touchstart": 14 oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; 15 break; 16 case "touchend": 17 oInp.innerHTML = " 18Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")"; 19 break; 20 case "touchmove": 21 event.preventDefault(); 22 oInp.innerHTML = " 23Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; 24 break; 25 } 26 27 } 28} 29window.addEventListener('load',load, false);
html5滚轮控件 http://www.17sucai.com/pins/7750.html
~~~~~~~~~~~~~~~~~~~~2014-11-29 更新~~~~~~~~~~~~~~~~~~~~~~~
自定义事件
对于自定义事件，这是一个很时尚的词汇，对于一个事件，他需要具备什么样的条件呢？
①使用特定的消息队列,必须遵守先进先出的原则
②事件具有瞬时性，在特定的条件下，事件造成的结果不会持久化，除非特别的进行了保存
③事件必须可传递，可被拦截，可以阻止浏览器默认行为
④必须遵循3个阶段的原则（根元素-*-*->目标元素的捕获阶段；目标元素的处理阶段；目标元素-*-*->根元素冒泡阶段），
其中第一阶段对于非目标元素而言，并不**自动（当然如果你喜欢的话其实也可以捕获）**进行捕获处理（这点比android好多了），
（注：在标准浏览器中，addEventListener的第三个参数 useCapture表示是否在捕获阶段捕获，值为true时在捕获阶段捕获）
⑤必须可触发dispatchEvent
自定义事件①
1/** 2 *自定义事件 3 * 4 **/ 5var myEvent = document.createEvent('CustomEvent'); 6 7myEvent.initCustomEvent('myevent',true,false,{name:'张三'}); 8//参数1表示事件的名称，参数二表示是否可冒泡，参数三表示是否可取消 9 10element.addEventListener('myevent', function(event) { 11 12 console.log('Hello ' + event.detail.name); 13 14 }); 15 16element.dispatchEvent(myEvent);
注意：createEvent的参数必须参考如下表格
自定事件②
此外，还有一种自定义事件的方式
1document.addEventListener('look',function(){ 2 3 console.log('look me !'); 4 5},false); 6 7var ev = new Event("look", {"bubbles":true, "cancelable":false}); 8document.dispatchEvent(ev);
try doing it!