前言
javascript 中事件分类有：MouseEvent（鼠标事件）、Event对象、FocusEvent对象、InputEvent （input事件）、KeyboardEvent（键盘事件）、WheelEvent （滚轮事件）。
各个事件中具备自身独立的属性，比如clientX、clientY只属于mouseEvent；keyCode只属于KeyboardEvent等。
Event称为事件基类，基类的属性是最少的。
Event事件的类别有以下：
- change 修改事件
- submit 提交事件
- reset 重设事件
- select 选择文字事件
- resize 重新修改大小事件
- scroll 滚动条事件
- load 加载事件
- unload 卸载事件
- error 错误事件
change 修改事件
change 是修改事件，主要用于表单元素，当表单元素被修改时，失去焦点时才会触发事件
input 的 change 事件：只有当 input 的 value 有修改时，才会触发事件
<input type="text" id="user" name="user">
<script>
var user=document.getElementById("user");
user.addEventListener("change",changeHandler);
function changeHandler(e){
console.log(e);
}
</script>
select 的 change 事件：
当 select 为多选时，可以用下面这两个属性来获取被选中的值，
- selectedIndex 下拉菜单被选中的索引值
- selectedOptions 下拉菜单中被选的option标签列表
<!--multiple 设置select多选-->
<select id="city" name="city" multiple>
<option>北京</option>
<option>西安</option>
<option>上海</option>
</select>
<script>
var city=document.getElementById("city");
city.addEventListener("change",changeHandler);
function changeHandler(e){
console.log(this.selectedIndex);//获得被选中的索引值
console.log(this.selectedOptions);//获得被选的option标签列表
}
</script>
当 select 为多选时，向后台提交数据，会看到请求数据中 city 被传了两个值，这样传参是不正确的，我们可以在提交表单的时候，将 select 的值合并一下。
去掉 select 的 name 属性，同时在页面中放入一个隐藏的 input，name 为 citySelect，将 select 被选中的值以符号分隔传给 input。
<input type="text" name="citySelect" id="citySelect">
<select id="city" multiple>
<option>北京</option>
<option>西安</option>
<option>上海</option>
</select>
<script>
var city=document.getElementById("city");
var citySelect=document.getElementById("citySelect");
city.addEventListener("change",changeHandler);
function changeHandler(e){
var selectStr=Array.from(this.selectedOptions).reduce(function(value,item){
return value+(value.length===0 ? "" :",")+item.textContent;
},"");
citySelect.value=selectStr;
}
</script>
提交表单后，就可以看到数据可以正确传递了
submit 提交事件、reset 重设事件
- submit 和 reset，表单的事件类型，只能作用于form元素
- 当给 form 侦听 submit 事件后，点击 form 里的 button 按钮或者 submit 按钮，都会触发 submit 提交事件。
- 提交submit时,没有name的表单不会被提交
<form action="#" method="GET">
<input type="text" id="user" name="user">
</form>
<script>
var form=document.querySelector("form");
var user=document.getElementById("user");
form.addEventListener("submit",submitHandler);
form.addEventListener("reset",resetHandler);
function submitHandler(e){
//提交处理
}
function resetHandler(e){
//重置
}
</script>
select 选择文字事件
select 文本选择事件，主要针对于 input 或者 textArea 中的文本选择，与下拉菜单没有关系，主要是选择文本框中的文本内容时触发事件。
可以用 input 的以下属性来获取选中的值：
- selectionStart 选中值的开始位置下标
- selectionEnd 选中值的结束位置下标
- selectionDirection 有两个值：forward为从左到右选择、backward为从右到左选择
<input type="text" id="user" name="user">
<script>
var user=document.getElementById("user");
user.addEventListener("select",selectHandler);
function selectHandler(e){
console.log(user.selectionStart);//开始位置的索引
console.log(user.selectionEnd);//结束位置的索引
console.log(user.selectionDirection);//选择的方向
}
</script>
案例：将 input 或者 textarea 中选中的小写字母改成大写字母
//接上一段代码
function selectHandler(e){
user.value=user.value.slice(0,user.selectionStart)+user.value.slice(user.selectionStart,user.selectionEnd).toUpperCase()+user.value.slice(user.selectionEnd)
}
resize 重新修改大小事件
resize 重新修改大小事件，主要针对window事件，作用于window，窗口被改变大小时事件被触发
案例：当窗口改变时，将 html 字体大小成比例缩小：
window.addEventListener("resize",resizeHandler);
function resizeHandler(e){
var scale=document.documentElement.clientWidth/screen.width;
document.documentElement.style.fontSize=100*scale+"px";
}
scroll 滚动条事件
scroll 滚动事件,可以针对任何具备滚动条的容器进行侦听。
注意：
- 滚轮滚动不是滚动事件触发的方式，滚轮滚动改变了滚动条的位置，才会触发滚动事件。滚轮滚动属于间接触发滚动条事件
- 只有滚动条位置的改变才能触发滚动事件
- 如果要设置flash中的滚动条不改变外部的滚动条，需要在flash的标签上设置停止冒泡，flash标签有<embed></embed><object></object>
- 当元素滚动，页面滚动条不滚动时，需要设置滚动元素的阻止默认事件
document.body.addEventListener("scroll",scrollHandler);
function scrollHandler(e){
//如果要设置flash中的滚动条不改变外部的滚动条，需要在flash的标签上设置停止冒泡
e.stopPropagation();
}
unload 卸载事件
unload 卸载事件，关闭窗口、原有的页面在刷新时，原有的页面会被卸载掉，这个时候触发事件。
注意：
- 关闭当前浏览器标签时被触发，关闭浏览器时不被触发
- e.preventDefault()，不能阻止卸载事件
window.addEventListener("unload",unloadhandler);
function unloadhandler(e){
console.log(e);
}
load 加载事件
load 加载事件，给window增加load事件，页面中所有的元素被加载完成后触发该事件，包括图片，页面元素过多的话，加载时间会很长，所以不建议这么写
window.onload=function(e){
console.log(e);
}
error 错误事件
error 错误事件，比如地址错误造成的加载失败会触发
给 img 添加 src 后，触发 img 的 load 事件。先侦听再派发，所以要把事件侦听写在派发的上面。
var img=new Image();
img.addEventListener("load",loadHanlder)
img.addEventListener("error",errorHanlder);
img.src="./img/"+num+"-.jpg";
function loadHanlder(e){
console.log(e);
}
function errorHanlder(e){
console.log(e);
}
