事件10

window.onbeforeunload=function(event){
        var event=event||window.event;
        if(event){
            returnValue="您要离开吗？";//chrome只会出现这句
        }
        return "are you sure to leave";//Ie 前后两句都会出现，但是火狐都没有
    };

window.addEventListener('beforeunload', function( event ) {
        event.returnValue = '你确认要离开吗？';
    },true);

window.addEventListener('DOMContentLoaded',function(event){
        console.log("要在脚本之前引入，否则若脚本发生呢错误，他就没办法显示了")
    })

 document.onreadystatechange=function(){//当页面加载状态改变时触发执行
        if(document.readyState="interactive"){
            console.log("正在加载中");
        }
        if(document.readyState="completed"){
            console.log("加载完成");
        }
    };
//resize
    var resizeMethod=function(){
        if(document.body.clientWidth<900){
            console.log("移动设备")
        }
    };
    window.addEventListener("resize",resizeMethod,false);

//焦点事件，不会冒泡，只能捕获
   var form = document.getElementById("input");
    form.addEventListener("focus", function( event ) {
        event.target.style.background = "pink";
    }, true);
    form.addEventListener("blur", function( event ) {
        event.target.style.background = "";
    }, true);

    //页面滚动
    window.onscroll=function(){
        console.log("页面滚动");
    };

   form.onkeydown=function(){
       console.log("按下");
   };
    form.onkeypress=function(){
        console.log("按住")
    };
    form.onkeyup = function(){
        console.log("松开");
    }

var touch=document.getElementById('touch');
touch.addEventListener("touchstart",function(e){
     console.log(e);
     console.log("clientX:"+e.targetTouches[0].clientX);//相对浏览器的宽高，和是否滚动无关 小的
     console.log("clientY"+e.targetTouches[0].clientY);
     console.log("screenX"+e.targetTouches[0].screenX);//相对于屏幕的宽高，和是否滚动无关 大的
     console.log("screenY"+e.targetTouches[0].screenY);
     console.log("pageX"+e.targetTouches[0].pageX);//相对浏览器的宽高，和是否滚动有关  小的
     console.log("pageY"+e.targetTouches[0].pageY);

 });

使用触摸屏幕之前需在页面的头部加入下面这句代码，这样才能在手机端实现

 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">