Window 事件属性
1.点击事件
document.getElementById("myBtn").onclick=function(){
console.info('onclick event')
};
2.onload 和 onunload 事件
当用户进入或离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理 cookies。
<body onload="checkCookies()"> //页面进入时触发该事件
3.onchange 事件
onchange 事件常用于输入字段的验证。
支持该事件的 HTML 标签：
<input type="text">, <select>, <textarea>
在焦点离开输入框的时候触发事件
<input type="text" id="fname" onchange="upperCase()">
扩展
监听input表单值的变化的方法：
①oninput，不兼容IE8和8以下
let test1 = document.getElementById('test1');
test1.oninput=function(e){
console.log(e.target.value)
}
②JQ方法
$("#test1 ").bind('input porpertychange',function(){
console.log("e");
});
③onpropertychange，只适用于IE
与oninput配合使用判断浏览器类型
document.getElementById("test2").attachEvent("onpropertychange",function(e){
console.log("inputting!!");
})
3.浏览器窗体大小发生变化事件
<body onresize="showMsg()">
Form 事件
①onblur 元素失去焦点时运行的脚本。
②onchange 在元素值被改变时运行的脚本。
③onfocus 当元素获得焦点时运行的脚本。
④onselect 在元素中文本被选中后触发。
⑤onsubmit 在提交表单时触发。
test1.onblur=function(){
console.log('onblur')
}
test1.onchange=function(){
console.log('onchange')
}
test1.onfocus=function(){
console.log('onfocus')
}
test1.onselect=function(){
console.log('onselect')
}
form.onsubmit=function(){
console.log('onsubmit')
}
Keyboard 事件
①onkeydown 在用户按下按键时触发。
②onkeypress 在用户敲击按钮时触发。
③onkeyup 当用户释放按键时触发。
Mouse 事件
①onclick 元素上发生鼠标点击时触发。
②ondbclick 元素上发生鼠标双击时触发。
③ondrag（H5）元素被拖动时运行的脚本。
④onmousedown 当元素上按下鼠标按钮时触发。
⑤onmousemove 当鼠标指针移动到元素上时触发。
⑥onmouseout 当鼠标指针移出元素时触发。
⑦onmouseover 当鼠标指针移动到元素上时触发。
⑧onmouseup 当在元素上释放鼠标按钮时触发。
⑨onmousewheel 当鼠标滚轮正在被滚动时运行的脚本。
⑩onscroll 当元素滚动条被滚动时运行的脚本。
扩展
onclick和onmousedown的区别：
首先说一下onclick。onclick是在鼠标点击弹起之后触发的事件，即一次完整的鼠标点击过程。过程完成瞬间触发函数；
onmousedown事件则是在鼠标按键按下去的瞬间触发的；
而言之，也就是说onclick=onmousedown+onmouseup；
onmouseover 和onmousemove的区别：
时间上 onmousemove 事件触发后，再触发 onmouseover 事件。
按钮上 不区分鼠标按钮。
动作上 onmouseover 只在刚进入区域时触发。onmousemove 除了刚进入区域触发外，在区域内移动鼠标，也会触发该事件。
当鼠标移动很快时，可能不会触发这两个事件。
onmouseover与onmousemove的区别是：当鼠标移过当前对象时就产生了onmouseover事件（onmouseover有个移入移出的过程）,当鼠标在当前对象上移动时就产生了onmousemove事件，只要是在对象上移动而且没有移出对象的，就是onmousemove事件。
Media 事件
由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）:
网友评论