javascript---事件对象

事件对象event

　　如果是事件处理函数绑定的函数，浏览器会默认传递一个参数，event对象。而这个对象会根据触发的事件判断是鼠标事件还是键盘事件

 

//鼠标事件

1 document.οnclick=function(evt){ 2 alert(evt); //键盘事件 3 }

//键盘事件

1 document.οnkeydοwn=function(evt){ 2 alert(evt); //键盘事件 3 }

 

由于IE浏览器和W3C浏览器获取event对象有不兼容的地方，所以需要兼容方法:

1 var e=evt||window.event;

 

---

 

event对象的属性和方法：

1.可视区坐标（浏览器）

clientX   clientY

1 document.οnclick=function(evt){ 2 var e=evt||window.event; 3 alert(e.clientX+','+e.clientY); 4 }

 

2.离屏幕的位置

screenX   screenY

1 document.οnclick=function(evt){ 2 var e=evt||window.event; 3 alert(e.screenX+','+e.screenY); 4 }

 

3.获取对应标签名

target

兼容IE写法：

1 function getTarget(evt){ 2 var e=evt||window.event; 3 return e.target||e.srcElement; 4 }

 

---

事件流：

　　事件流包括两种模式：冒泡和捕获，现在浏览器默认情况下都是冒泡模型

 

冒泡：从里往外逐个触发

捕获：从外往里逐个触发

 

1 //冒泡 2 document.οnclick=function(){ 3 alert('document'); 4 } 5 document.documentElement.οnclick=function(){ 6 alert('html'); 7 } 8 document.body.οnclick=function(){ 9 alert('body'); 10 } 11 document.getElementById('box').οnclick=function(){ 12 alert('box'); 13 }

即当点击box的时候，还会弹出body，html和document，这就是冒泡，我们有时候需要阻止冒泡

 

取消冒泡：

　e.stopPropagation();  //w3c,取消冒泡   e.cancelBubble=true;  //IE，取消冒泡

1 //兼容 2 function setStop(evt){ 3 var e=evt||window.event; 4 (typeof e.stopPropagation=='function')?e.stopPropagation():e.cancelBubble=true; 5 }

 

转载于:https://www.cnblogs.com/GacentJohn/p/5331262.html