【js基础】js事件对象学习笔记

来源：互联网发布：asp通用查询系统源码编辑：程序博客网时间：2024/05/25 08:13

DOM中的事件对象

event对象的相关属性

属性/方法类型读/写说明 bubbles Boolean 只读表示事件是否支持冒泡 currentTarget element 只读事件处理程序当前正在处理的那个元素 cancelable Boolean 只读表示是否可以取消事件的默认行为 defaultprevented Boolean 只读为true表示已经调用了preventDefault preventDefault() Function 只读取消事件的默认行为，如果cancelable为true,则可以使用这个方法 detail Integer 只读与事件相关的细节信息 eventphase Integer 只读调用事件处理程序的阶段：1表示捕获阶段，2表示处于目标阶段，3表示冒泡阶段 stopzImmediatePropagation() Function 只读取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用 stopPropagation() Function 只读取消事件的进一步捕获或冒泡，如果bubbles为true,则可以使用这个方法 target Element 只读事件的目标 trusted Boolean 只读为true表示事件是浏览器生成的，为false表示事件是开发人员通过javascript创建的 type String 只读被触发的事件类型 view AbstractView 只读与事件关联的抽象视图；等同于事件的window对象

说明

在事件处理程序的内部，对象this始终等于currentTarget，而target则为事件的实际目标（即此刻鼠标下的对象）；

eg：测试点这里

<div id="mydiv">        <button id="mybtn">点我</button>    </div>

    var d=document.getElementById("mydiv");        var btn=document.getElementById("mybtn");        var handler=function(){            // console.log(event);            alert(event.currentTarget===this);            alert(event.target===this);        //  event.stopImmediatePropagation();        }        // //不一定按照代码的顺序执行，按冒泡或捕获顺序执行        d.addEventListener("click",handler,true);        btn.addEventListener("click",handler,true);        //捕获 点按钮 result:true false true true        //冒泡 点按钮 result:true true true false

通过一个函数处理多个事件，用type属性：

    var handler=function(event){            switch(event.type){                case "click":{                    alert("hello world");                    break;                 }                case "mouseover":{                    // console.log(event.target);                                event.currentTarget.style.backgroundColor="red";                    break;                }                case "mouseleave":{                    event.currentTarget.style.backgroundColor="pink";                    break;                }            }        }        d.addEventListener("click",handler,false);        d.addEventListener("mouseover",handler,false);        d.addEventListener("mouseleave",handler,false);

JS高级程序设计中用得是event.target 我个人觉得这样不好，我们再给对象调用addEventListener函数时，当然希望我们handler处理的是对象本身，而不是实际的鼠标下的对象。特别的，在处理事件的捕获和冒泡时，event.target会特别乱。

看这样一个例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>js2</title><style>    div{        width:300px;        height:300px;        background-color:blue;    }    button{        /*position: relative;        top:100px;        left:100px;*/        cursor: pointer;    }</style>    </head><body>    <div id="mydiv">        <button id="mybtn">点我</button>    </div>    <script>        var d=document.getElementById("mydiv");        var btn=document.getElementById("mybtn");        var handler=function(event){            switch(event.type){                case "click":{                    alert("hello world");                    break;                 }                case "mouseover":{                    // console.log(event.target);                    event.currentTarget.style.backgroundColor="red";                    break;                }                case "mouseleave":{                    event.currentTarget.style.backgroundColor="pink";                    break;                }            }        }        d.addEventListener("click",handler,false);        d.addEventListener("mouseover",handler,false);        d.addEventListener("mouseleave",handler,false);    </script></body></html>

测试点这里

IE中的事件对象

属性/方法类型读/写说明 cancelBubble Boolean 读/写默认值为false,但将其设置为true就可以取消事件冒泡===stopPropagation() returnValue Boolean 读/写默认值为true,但将其设置为false就可以取消事件的默认行为===preventDefault() scrElement Element 只读事件的目标===target type String 只读被触发的事件类型

跨浏览器的事件对象

（取自js高级程序设计第三版）

var EventUtil={        addhandler:function(element,type,handler){            if(element.addEventListener){                element.addEventListener(type,handler,false);               }else if(element.attachEvent){                element.attachEvent("on"+type,handler);            }else{                element["on"+type]=handler;            }        },        removehandler:function(element,type,handler){            if(element.removeEventListener){                element.removeEventListener(type,handler,false);            }else if((element.detachEvent){                element.detachEvent("on"+type,handler);            }else{                element["on"+type]=null;            }        },        getEvent:function(event){            return event?event:window.event;        },        getTarget:function(event){            return event.target || event.srcElement;        },        preventDefault:function(event){            if(event.preventDefault){                event.preventDefault();            }else{                event.returnValue=false;            }        },        stopPropagation:function(event){//只能阻止事件冒泡            if(event.stopPropagation){                event.stopPropagation();            }else{                event.cancelBubble=true;            }        }    };

阅读全文

0 0