表单事件、键盘事件、BOM

一、表单事件
onblur 失去焦点
onfocus 获取焦点
oninput 实时获取到表单里面的内容
onchange 失去焦点时且内容发生改变时获取内容

var input = document.getElementById("input");
input.onblur = function(){
  console.log("已失去焦点");
}
input.addEventListener("blur", function(){
  console.log("已失去焦点");
});
input.addEventListener("focus", function(){
  console.log("已获取焦点");
});
input.oninput = function(){
  console.log(this.value);
}
input.onchange = function(){
  console.log(this.value);
}

//切换页面时，失去焦点与获取焦点
window.onblur = function(){
  console.log("切换到别的地方去了");
}
window.onfocus = function(){
  console.log("已切换回来了");
}

二、键盘事件
onkeydown 键盘按下
onkeyup 键盘抬起
onkeypress 键盘按下
onkeydown与onkeypress的区别：
onkeypress不响应例如功能键/箭头键【键盘上的上下左右键】
onkeydown都包括

input.onkeydown = function(e){
  console.log("按下");
}
input.onkeyup = function(){
  console.log("抬起");
}
input.onkeypress = function(){
  console.log("再按下");
}

三、具体的键值

var input = document.getElementById("input");
input.onkeydown = function(e){
  console.log(e.keyCode);  //键对应的编码
  console.dir(e);
  console.log(e.key);  //键值
  //同时按下ctrl+alt+b
  if(e.altKey && e.ctrlKey && e.keyCode === 66){
    console.log("正确的操作");
  }else{
    console.log("错误的操作");
  }
}

四、BOM浏览器对象
BOM：Browser Object Model 浏览器对象模型
Window对象方法
Navigator：浏览器对象
Screen：屏幕对象
History：浏览器历史对象
Location：地址对象

//Navigator：浏览器对象
console.log(navigator.appName);  //网景公司
console.log(navigator.cookieEnabled);  //返回浏览器是否启用cookie【值为布尔值】

//Screen：屏幕对象
console.log(screen.availWidth);  //可用屏幕宽
console.log(screen.availHeight);  //可用屏幕高

//History：浏览器历史对象
var input = document.getElementsByTagName("input");
input[0].onclick = function(){
  window.history.back();//后退
}
input[1].onclick = function(){
  window.history.forward();//前进
}
input[2].onclick = function(){
  window.history.go(0);
  //go的取值为负的则返回，如果为正则为前进，如果为0为刷新
}

//Location 对象方法
console.log(location.href);//获取到具体的路径
console.log(location.pathname);//获取到文档的路径

附上一个比较全的介绍BOM对象的博客
https://www.cnblogs.com/fengmingyue/p/5946116.html

最后编辑于：2018.09.13 11:34:53