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

• 点赞
• 收藏
• 分享
• 文章举报