详细解析DOM事件的event事件对象（二）

详细解析DOM事件的event事件对象（二）

上篇博客说到了DOM的键盘事件和鼠标事件的event对象，这次我们再来聊一聊event对象剩下的属性。

HTML代码：

    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>

CSS代码：

    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        margin-top: 20px;
        color: white;
        font-size: 50px;
    }
    .box:nth-of-type(odd){
        background: red;
    }
    .box:nth-of-type(even){
        background: green;
    }

JavaScript代码：

    var aBox=document.getElementsByClassName("box");
    // bubbles	返回布尔值，指示事件是否是冒泡事件类型。	2
    // cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。	2
    aBox[0].onclick=function(ev){
        var ev=ev||window.event;
        console.log(ev)
    }




    // eventPhase	返回事件传播的当前阶段。	2

    // target	返回触发此事件的元素（事件的目标节点）。	2
    aBox[2].onclick=function(ev){
        var ev=ev||window.event;
        console.log(ev.target);
    }
    aBox[3].onclick=function(ev){
        var ev=ev||window.event;
        console.log(ev.target);
    }
    
    // currentTarget	返回其事件监听器触发该事件的元素。	2

    // timeStamp	返回事件生成的日期和时间。	2

    // type	返回当前 Event 对象表示的事件的名称。	2
    aBox[1].onmouseover=function(ev){
        var ev=ev||window.event;
        console.log(ev)
    }

视频讲解链接：
https://www.bilibili.com/video/BV1Vk4y1z7Jm/