Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态在IE/Opera中,是window.event,而在Firefox中,是event,谷歌则是两者都可以;
而事件的对象,在IE中是window.event.srcElement,在Firefox中是event.target,而在Opera中则两者都支持。
考虑到兼容性,Event需要在监听事件函数中作为参数显示调用 var e = e||window.event;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ margin: 20px; height: 200px; background-color: chartreuse; font-size: 30px; } </style> </head> <body> <div id="div1">我是第一个div</div> <div id="div2">我是第二个div</div> <div id="div3">我是第三个div</div> <a href="window.html">连接到window.html</a> <button onclick = "openWindow()">点我打开window.html</button> </body> <script> //以下3种方法是使用window.event属性 //第一种方式,在html标记中显示地执行事件函数 // function clickDiv1(){ // console.log(window.event);//这里可以获取event对象 // } // clickDiv1();//不是事件执行这个函数的时候,window.event对象为undefined // //第二种方式,使用元素节点添加事件 // var div2 = document.getElementById("div2"); // div2.onclick = function(){ // console.log(window.event); // } // //第三种方式,使用事件监听 // var div3 = document.getElementById("div3"); // div3.addEventListener("click",function(){ // console.log(window.event); // }) //以下3种方法是使用event参数,即事件函数中的实参也获得event对象 //第一种方式,在html标记中显示地执行事件函数,无法获得event对象 // function clickDiv1(e){ // console.log(e);//这里不能获取 // } // //第二种方式,使用元素节点添加事件 // var div2 = document.getElementById("div2"); // div2.onclick = function(e){ // console.log(e);//可以获取event对象 // } // //第三种方式,使用事件监听 // var div3 = document.getElementById("div3"); // div3.addEventListener("click",function(ev){ // console.log(ev); // }) //点击某个div,显示出点击的是哪个div,只写一个事件函数实现这个功能 // function clickBody(){ // console.log(window.event) // var divNow = window.event.target; // alert("你点的是"+divNow.id+"个div") // } //兼容性写法 // var div1 = document.getElementById("div1"); // div1.addEventListener("click",function(ev){ // var ev = window.event || ev; // console.log(ev); // }) //open方法中的第3个参数中的top和left是根据显示器窗口的位置 function openWindow(){ window.open("window.html","_blank", "width=200,height=200,toolbar=no,location=no,menubar=no,top=200,left=200"); } </script> </html>