工作日常--javascript各种事件总结

onload事件

页面元素完全加载完成之后执行的事件

window.onload = function(){
console.log("页面元素已经完全加载");
}

onunload事件

页面元素完全卸载完成之后执行的事件

window.onunload = function(){
console.log("页面完全卸载完成咯");
}

onresize事件

窗口有所缩放之后触发

window.onresize = function(){

console.log(“窗口缩放了”);

}

onfocus和onblur事件

这个事件要配合文本框，或者textarea亦或者select使用

var input = document.getElementById("name");
input.onfocus = function(){
console.lopg("文本框有焦点咯");
}

onscroll事件

滚动条滚动事件

* 如果想监听窗口的滚动条是否滚动则就使用window.onscroll;

* 如果是监听某个元素的滚动条事件，怎通过获取到该元素的ID来监控

window.onscroll = function() {
console.log("鼠标滚动了");
}

onclick事件

用到最多的点击事件

```
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
console.log("click事件")
```

onmousedown和onmouseup

鼠标点击/弹起事件

var btn3 = document.getElementById("btn3");
btn3.onmousedown = function(){
console.log("鼠标点击了")
}

onmouseover和onmouseout

鼠标移入某个元素或者移出

var btn3 = document.getElementById("btn3");
btn3.onmouseover= function(){
console.log("鼠标来了")
}

获取鼠标点击的瞬间可以根据event对象获取到相应的坐标

var btn = document.getElementById("btn");
btn.onclick = function(event){
// 客户端区坐标位置
event.clientX;
event.clientY;
// 页面中的位置
event.pageX;
event.pageY;
// 屏幕坐标位置
event.screenX;
event.screenY;
}

onkeydown事件

点击键盘任意按键触发该事件，若按下去不放上来则一直执行

var btn = document.getElementById("btn");
btn.onkeydown = function(e){
console.log("键盘被按下了");
// 判断哪个按键被按下
console.log(e.keyCode);
}

onkeypress事件

点击键盘的字符案件触发，若按下去不放开则一直触发

var btn = document.getElementById("btn");
btn.onkeypress= function(e){
console.log("键盘有字符被按下啦")
// 判断哪个按键被按下
console.log(e.keyCode);
}