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

雨点打透心脏的1/2处 2023-02-14 13:14 33阅读 0赞

## 详细解析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/**

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关【js】event(事件对象)详解

1.事件对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。什么时候会产生Event 对象呢?

向右看齐/ 2023年07月04日 12:37/ 0 赞/ 154 阅读

相关 Javascript中的DOM(三) 事件与Event对象

事件与Event对象事件事件的种类鼠标事件键盘事件表单事件

川长思鸟来/ 2023年06月22日 05:19/ 0 赞/ 111 阅读

相关 JavaScript之DOM对象（Event事件）

文章目录一、Event事件汇总二、用法案例 1、serche搜索框

比眉伴天荒/ 2023年03月13日 05:20/ 0 赞/ 253 阅读

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

详细解析DOM事件的event事件对象（二）上篇博客说到了DOM的键盘事件和鼠标事件的event对象，这次我们再来聊一聊event对象剩下的属性。 HTML代码：

雨点打透心脏的1/2处/ 2023年02月14日 13:14/ 0 赞/ 34 阅读

相关详细解析DOM事件的event事件对象（一）

详细解析DOM事件的event事件对象（一）近期我们一直在学习DOM，马上到了尾期了，今天来说一下DOM事件的event事件对象。这里我们先解析一下键盘和鼠标事件的ev

迷南。/ 2023年02月14日 13:13/ 0 赞/ 132 阅读

相关 javascript event（事件对象）详解

1. 事件对象 1. 事件对象 > Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。什么时候

喜欢ヅ旅行/ 2022年07月16日 05:53/ 0 赞/ 351 阅读

相关 JS基础——事件对象event

事件为什么会是对象呢？先了解一下事件处理一、事件处理 JS在事件处理函数中提供了事件对象，帮助处理鼠标和键盘事件。同时还可以修改一些事件的捕获和冒泡流的函

淡淡的烟草味﹌/ 2022年07月16日 05:53/ 0 赞/ 484 阅读

相关 JavaScript DOM0，DOM1，DOM2级事件与 event 对象

转自 [https://www.cnblogs.com/holyson/p/3914406.html][https_www.cnblogs.com_holyson_p_3914

你的名字/ 2022年04月05日 03:40/ 0 赞/ 370 阅读

相关事件冒泡、事件捕获、DOM2事件流和事件委托、DOM事件中Event对象

由网上文章整理成，具体可以参考下面文章： [https://www.cnblogs.com/xiaohuochai/p/5859476.html][https_www.cn

妖狐艹你老母/ 2022年03月17日 18:26/ 0 赞/ 554 阅读

相关 IE中事件详细解析(二)

这次主要分析在不同的页面下，主要的DWebBrowserEvent2的发生时机。我们先定义一个最简单的html <html xmlns="http://ww

╰+哭是因爲堅強的太久メ/ 2021年12月23日 15:39/ 0 赞/ 244 阅读