1事件源：触发谁的事件
2事件类型：这个事件是干什么的（点击，移动等）
3事件处理函数：事件过程做的一些事
事件对象event
每触发一个事件都会生产事件对象
事件对象 包含对事件的描述信息 坐标位置等等
获取事件对象，在事件处理函数（）中定义e来获取
<button>按钮</button>
<script>
var button1 = document.querySelector('button')
button1.onclick = function (e) {
e = e || window.event//解决兼容问题
console.log(e);
}
</script>
点击事件的光标坐标点获取
<div></div>
<script>
var divEle = document.querySelector('div')
divEle.onclick = function (e) {
e = e || window.event
var x = e.offsetX //相对于元素本身光标(鼠标点击)的位置
var y = e.offsetY
console.log(x, y);
var x2 = e.clientX //相对于浏览器窗口
var y2 = e.clientY
console.log(x2, y2);
var x3 = e.pageX //相对于页面
var y3 = e.pageY
console.log(x3, y3);
}
</script>
鼠标事件
<div>
这是一个盒子
</div>
<script>
var divEle = document.querySelector('div')
divEle.onmouseover = function () { //绑定鼠标事件移入
}
divEle.onmouseout = function () { //绑定鼠标事件移出
}
divEle.onmousemove = function (e) { //绑定鼠标事件移动
e = e || window.event
}
divEle.onmousedown = function (e) { //绑定鼠标事件按下
e = e || window.event
}
divEle.onmouseup = function (e) { //绑定鼠标事件松开
e = e || window.event
}
</script>
表单事件
提交 submit
焦点事件
获取焦点 onfocus
失去焦点 onblur
键盘事件
keyup ： 键盘抬起事件
keydown ： 键盘按下事件
keypress ： 键盘按下再抬起事件
