04.window事件.键盘事件和鼠标事件

一.windows 事件

1. window.onload = function(){} (window页面所有内容加载完成)

2.document.body.addEventListener('load',function(){}) (可以监控某个标签加载完成)

3.window.addEventListener('resize',function(){

console.log('宽'+window.innerWidth+'高:'+window.innerHeight)(获取窗口大小)

}) (可以监控窗口大小改变)

4.window.addEventListener('scroll',function(){

console.log('滚动到什么地方:'+document.documentElement.scrollTop)

}) (可以监控窗口滚动)

二.键盘事件

1.window.addEventListener('keydown',function(event){}) (监控键盘按下事件)

2.window.addEventListener('keypress',function(event){

event.code  (可以监控点击了什么键  输出key 键名)

event.keyCode (可以获得一个ACII值)

String.fromCharCode(event.charCode) ( 输出键名 )

(也可以用 :event.code.slice(3) 的(截取)方法获取键名)

})

slice(start,end)  (可以用在字符串的截取上)

(第一个数表示截取的起始位置,第二个数表示结束位置,如果不写第二个数默认截取后最后,负数的话表示往后开始算)

splice(start,length,"a","b"...) (只能用在数组上)

(第一个数表示开始位置,第二个数表示截取长度,后面的数表示添加进去的数组)

3.window.addEventListener('keyup',function(event){}) (监控键盘松开)

三.鼠标事件

1.section.addEventListenter('click',function(){}) (点击事件)

相当于 section.onclick = function(){}

2.section.addEventListenter('mousedown',function(){}) (鼠标按下时)

相当于 section.onmousedown=function(){}

3.section.addEventListenter('mouseup',function(){}) (鼠标松开时)

4.section.addEventListenter('mousemove',function(){}) (鼠标移动)

5.section.addEventListenter('mousewhell',function(){}) (鼠标滚动)