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

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会特别乱。

看这样一个例子:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js2title>
<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;
            }
        }

    };

你可能感兴趣的:(【js基础】js事件对象学习笔记)