javascript---事件对象

事件对象event

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

 

//鼠标事件

    document.onclick=function(evt){
            alert(evt);        //键盘事件
        }

//键盘事件

    document.onkeydown=function(evt){
            alert(evt);        //键盘事件
        }

 

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

var e=evt||window.event;

 

---

 

event对象的属性和方法：

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

clientX   clientY

    document.onclick=function(evt){
            var e=evt||window.event;
            alert(e.clientX+','+e.clientY);
        }

 

2.离屏幕的位置

screenX   screenY

    document.onclick=function(evt){
            var e=evt||window.event;
            alert(e.screenX+','+e.screenY);
        }

 

3.获取对应标签名

target

兼容IE写法：

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

 

---

事件流：

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

 

冒泡：从里往外逐个触发

捕获：从外往里逐个触发

 

    //冒泡
            document.onclick=function(){
                alert('document');
            }
            document.documentElement.onclick=function(){
                alert('html');
            }
            document.body.onclick=function(){
                alert('body');
            }
            document.getElementById('box').onclick=function(){
                alert('box');
            }

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

 

取消冒泡：

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

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