说明
当触发响应函数时，浏览器还会传入 事件对象
事件对象 封装了 当前事件的相关信息
案例
<button id="btn">按钮</button>
<body>
<script>
window.onload = function(){
var btn = document.getElementById("btn")
//传入 事件对象
btn.onclick = function(event){
console.log(event)
}
}
</script>
应用场景
获取鼠标位置
<div id="box" style="width: 200px; height: 200px; border: 1px red solid;"></div>
<input type="text" id="show">
<script>
window.onload = function (){
var box = document.getElementById("box")
var show = document.getElementById("show")
box.onmousemove = function(event){
event = event || window.event
//获取鼠标的水平坐标
var x = event.clientX
//获取鼠标的垂直坐标
var y = event.clientY
show.value = x +","+ y
}
}
</script>
获取触发事件的dom对象
通过 event.target 可以获取 触发事件的dom对象，通过该对象可以修改 标签的属性
如：点击按钮时，修改按钮的内容
<input type="button" value="点我" id="btn">
<script>
// 点击按钮时，浏览器监听到，调用该函数，将事件对象传入进来
document.getElementById("btn").onclick = function(event){
console.log("event:",event)
console.log("target:",event.target) // 获取触发事件的dom对象
event.target.value="按钮"
}
</script>
获取 事件类型
通过 event.target 可以获取 事件类型
<input type="button" value="点我" id="btn">
<script>
// 点击按钮时，浏览器监听到，调用该函数，将事件对象传入进来
document.getElementById("btn").onclick = function(event){
console.log("event:",event)
console.log("target:",event.target) // 获取触发事件的类型
}
</script>
兼容性
Chrome、Firefox、edge浏览器、IE8之后
浏览器会传入 事件对象，上面代码不需要改动
IE8之前
浏览器不会传入 事件对象，而是通过 window.event 获取事件对象，也就是说：上面代码在 IE8之前，执行报错
解决
btn.onclick = function(event){
// 如果 event 有值，就用 event；没有值，就用 windows.event
event = event || windows.event
console.log(event)
}