课程名称：事件监听
课程章节：JS函数与DOM
课程讲师： 未知
课程内容：
1. 什么是事件监听？
·DOM允许我们书写JavaScript代码以让HTML元素对事件作出反应
1-2. 什么是“事件”：用户与网页的交互动作
当用户点击元素时
当鼠标移动到元素上时
当文本框的内容被改变时
……
1-3. “监听”，顾名思义，就是让计算机随时能够发现这个事件发生了，从而执行程序员预先编写的一些程序
设置事件监听的方法主要有onxxx和addEventListener()两种，二者的区别将在“事件传播”一课中介绍
1-4. 最简单的设置事件监听的方法
最简单的给元素设置事件监听的方法就是设置它们的onxxx属性，像这样：
oBox.onclick = function () {
点击盒子时，将执行这里的语句
}
2. 常见的鼠标事件监听
* onclick //当鼠标单击某个对象
ondblclick //当鼠标双击某个对象
onmousedown //当某个鼠标按键在某个对象上被按下
onmouseup //当某个鼠标按键在某个对象上被松开
onmousemove //当某个鼠标按键在某个对象上被移动
onmouseenter //当鼠标进入某个对象（相似事件onmouseover)
onmouseleave //当鼠标离开某个对象（相似事件onmouseout)
.box2 {
width: 200px;
height: 200px;
background-color: #333;
}<div id="box2" class="box2"></div>
var oBox2 = document.getElementById('box2');
oBox2.onclick = function () {
console.log('我是onclick')
};
oBox2.ondblclick = function () {
console.log('我是ondblclick')
};
oBox2.onmousedown = function () {
console.log('onmousedown')
};
oBox2.onmouseup = function () {
console.log('onmouseup')
};
oBox2.onmouseenter = function () {
console.log('onmouseenter')
};
oBox2.onmouseleave = function () {
console.log('onmouseleave')
};
oBox2.onmousemove = function () {
console.log('onmousemove')
};3. 常见的键盘事件监听
onkeypress // 当某个键盘的键被按下（系统按钮如箭头键和功能键无法得到识别）
onkeydown //当某个键盘的键被按下（系统按钮可以识别，并且会先于onkeypress发生）
onkeyup //当某个键盘的键被松开
姓名： <input type="text" id="nameField">
var nameField = document.getElementById('nameField');
nameField.onkeydown = function(){
console.log('我是onkeydown')
};
nameField.onkeyup = function(){
console.log('我是onkeyup')
};
nameField.onkeypress = function(){
console.log('我是onkeypress')
};*4.常见的表单事件监听
onchange //当用户改变域的内容 （改变后，失去焦点后触发）
oninput //正在修改域的内容 （修改中触发）
onfocus //当某元素获得焦点（比如tab键或鼠标点击)
onblur //当某元素失去焦点
onsubmit //当表单被提交
onreset //当表单被重置
<form id="myform"> <p> 姓名： <input type="text" name="nameField"> </p> <p> 年龄： <input type="text" name="ageField"> </p> <p> <input type="submit"> <input type="reset"> </p> </form>
var myform = document.getElementById('myform');
var nameField = myform.nameField;
var ageField = myform.ageField;
nameField.onchange = function(){
console.log('你已经修改完了姓名');
};
nameField.oninput = function(){
console.log('你正在修改姓名');
};
nameField.onfocus = function(){
console.log('姓名框已经得到了焦点');
};
nameField.onblur = function(){
console.log('姓名框已经失去了焦点');
};
myform.onsubmit = function(){
alert('你正在尝试提交表单');
};
myform.onreset = function(){
alert('你正在尝试重置表单');
};5.常见的页面事件监听
onload //加载页面完成时
onunload //退出页面时
课程收获：
再次复习事件监听觉得还是挺简单的，但是js的事件监听在学了Vue之后，会觉得还是挺麻烦的，而且初学者容易弄混，当然也可能是我学得不扎实，继续努力吧，加油！