JavaScript事件，window的事件

目录

概念：事件是发生后并得到处理的操作

一、页面相关的事件

二、鼠标事件

三、键盘事件

绑定给文档

四、表单相关的事件

---

概念：事件是发生后并得到处理的操作

一、页面相关的事件

• window.onload；表示等页面所有内容（文档，图片，js，src等）加载完毕执行的代码
• window.onscroll；

window.onscroll = function（）{

    Console.log（“滚动条滚动时触发的事件”）；

}

• window.onresize；

window.onresize= function（）{

    Console.log（“窗口大小发生改变时触发的事件”）；

}

二、鼠标事件

• onclick；单击事件，鼠标左键点击
• ondblonclick；双击事件，鼠标左键点击
• onmousedown；鼠标按钮被按下，鼠标按键被按下都可以被触发，e.button的值为0代表左键，1代表中键，2代表右键，e表示事件对象，包含事件发生时详细信息

box.onmousedown = function（e）{

    console.log（e.button）；

}

• onmouseup；表示鼠标按键松开时触发的事件
• onmousemove；表示鼠标移动事件
• onmouseover；表示鼠标划入效果触发的效果，只触发一次，类似于hover效果
• onmouseout；表示鼠标划出效果
• 给父元素绑定onmouseover和onmouseout事件，在划过子元素时，会先触发划出，再触发划入，解决方法：用onmouseenter（划入）和onmouseleaver（划出）替换
• oncontextmenu；表示鼠标右键点击事件

三、键盘事件

绑定给文档

• document.onkeydown；键盘按键被按下时触发的事件，对所有的按键生效，可以用e.key及e.code监听用户键盘的点击
• document.onkeyup；键盘按键抬起/松开
• document.onkeypress；键盘被按下并松开，功能和onkeydown一样，只对文本输入相关的按键（字母，数字，字符，运算符，enter，space）生效
• 绑定给表单元素，事件只会在表单元素里生效

四、表单相关的事件

• onfocus；聚焦时触发的事件
• onblur；失焦事件
• onchange；输入框内容发生改变或失去焦点触发的事件，下拉框选项的切换（option发生改变）
• oninput；表示即时输入（只要内容发生改变即可）
• onsubmit；绑定给form，由提交按钮触发
• onreset；绑定给form，由重置按钮触发