window.οnbefοreunlοad=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.οnscrοll=function(){
console.log("页面滚动");
};
form.οnkeydοwn=function(){
console.log("按下");
};
form.οnkeypress=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">