js 窗口事件/表单事件

1. 窗口事件

窗口事件是指与浏览器窗口或某个特定元素相关的事件。以下是一些常见的窗口事件：

1. load：当整个网页加载完成时触发。
2. resize：当浏览器窗口大小发生变化时触发。
3. scroll：当用户滚动页面时触发。
4. beforeunload：当页面即将卸载时触发，用于执行一些清理操作。
5. unload：当页面已经卸载时触发，用于执行一些清理操作。

要绑定这些事件，可以使用addEventListener()方法。下面是一个绑定窗口加载事件的示例： 

window.addEventListener('load', function(e) {  
  console.log('Page loaded!');  
});

 在上面的示例中，当整个网页加载完成时，会在控制台输出"Page loaded!"。

 2. 表单事件

 导语：onsubmit，onreset相对来说用的比较少 onchange：onselect 属性可用于以下元素内：以及 在百度文库中，当我们选中文本的内容的时候，会显示 搜索/复制/发送到手机/翻译 等内容，这时候就可以使用onselect

****事件	****说明
onsubmit	提交按钮被点击
onreset	重置按钮被点击
onselect	文本内容被选定
onchange	用户改变表单元素的内容
oninput	在用户输入时触发

 文本被选中

// 给多行文版框添加 选择的功能
var text = document.querySelector('textarea');
text.onselect = function(){
    console.log('123456789');
}

onchange 内容发生改变

// 只用多行文本发生会触发
text.onchange = function(){
    console.log('页面内容发生改变');
}

// 表单中的任意一个内容发生改变，都会触发onchange
var form1 = document.getElementById('form1');
form1.onchange = function(){
    console.log('change');
}

注意：onselect 属性可用于以下元素内：< input type="file" >、< input type="password">、< input type="text">、< keygen> 以及 < textarea>.

注意2：oninput事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

3.单选框和复选框被选中

复选框是否被选中需要判断复选框中的checked的值 true：选中 false：没选中

基础案例

<input type="checkbox" id='inp'/>
<script>
    var oInp = document.querySelector('#inp');
    oInp.onclick = function(){
        console.log(this.checked);
    }
</script>

 4.加载事件

导语：正常情况下，js代码是可以写在head标签中，也可以写在/body结束的后面；但是当我们把js代码写在head中，并且js代码中有获取页面html标签的操作的时候，这时候的js代码就会报错

表示没有 “无法读取null属性(读取'innerHTML')”，也就是没有获取到对象，这时候可以在所有js的代码外面天际onload的；表示，html页面内容加载完毕之后，在执行js代码

****事件	****说明
onload	页面或图像加载完成
onbeforeunload	页面卸载前执行

// 如果页面中有滚动事件，滚动之后，想要重新刷新页面的时候，滚动条在最上面，可以使用这个方式

window.onbeforeunload = function () {

window.scrollTo(0, 0);

}