JS中event对象的使用和解决兼容问题

event对象

event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

使用window.event属性

1.第一种：在html标记中显示地执行事件函数

<script>
//第一种方式,在html标记中显示地执行事件函数
function clickDiv1(){
    console.log(window.event);//这里可以获取event对象
}
clickDiv1();//不是事件执行这个函数的时候，window.event对象为undefined
</script>

不是事件执行这个函数的时候，window.event对象为undefined

2.第二种：使用元素节点添加事件

<script>
//第二种方式，使用元素节点添加事件
var div2 = document.getElementById("div2");
div2.onclick = function(){
    console.log(window.event);
}
</script>

3.第三种：使用事件监听

<script>
//第三种方式，使用事件监听
var div3 = document.getElementById("div3");
div3.addEventListener("click",function(){
    console.log(window.event);
})
</script>

---

使用event参数，即事件函数中的实参也获得event对象

1.第一种：html标记中显示地执行事件函数,无法获得event对象

<script>
//第一种方式,在html标记中显示地执行事件函数,无法获得event对象*/
function clickDiv1(e){
    console.log(e);//这里不能获取
}
</script>

此方法无法获得event对象

2.第二种：使用元素节点添加事件

<script>
//第二种方式，使用元素节点添加事件
var div2 = document.getElementById("div2");
div2.onclick = function(e){
    console.log(e);//可以获取event对象
}
</script>

3.第三种：使用事件监听

<script>
//第三种方式，使用事件监听
vardiv3 = document.getElementById("div3");
div3.addEventListener("click",function(ev){
    console.log(ev);
})
</script>

---

window.event.target的使用

点击某个div，显示出点击的是哪个div，只写一个事件函数实现这个功能

<script>
/*点击某个div，显示出点击的是哪个div，只写一个事件函数实现这个功能*/
function clickBody(){
    console.log(window.event)
    var divNow = window.event.target;
    alert("你点的是"+divNow.id+"个div")
}
</script>

---

解决兼容写法

<script>
/*兼容性写法*/
var div1 = document.getElementById("div1");
div1.addEventListener("click",function(event){
    var event = window.event || event;
    console.log(event);
})
</script>

---

keyCode值表：

参考文献：https://blog.csdn.net/lhjuejiang/article/details/79455801