JavaScript中的DOM事件

南腔北调-pilmar

已于 2024-06-09 16:21:09 修改

阅读量879

点赞数 13

分类专栏： # Web前端开发基础文章标签： javascript 开发语言 ecmascript

于 2024-06-08 16:17:53 首次发布

本文链接：https://blog.csdn.net/ningbw2000/article/details/139547687

版权

Web前端开发基础专栏收录该内容

28 篇文章 4 订阅

订阅专栏

DOM事件

在浏览网页的时候，我们常常会点击按钮然后就会弹出一个弹出框，或者直接按一下回车键进行搜索或执行某项功能，类似这些鼠标按键或键盘按键都是通过交互式事件来进行的。

事件，就是用户或浏览器自身执行操作而触发的某种动作，那么对某种动作的响应就是事件处理。响应事件处理或者说进行事件处理的回调函数就叫做事件响应处理函数。

3.7.1 DOM常用事件列表

在这里插入图片描述
事件命名特点：on+具体的事件名称，on前缀的意思就是：“这是一个用来处理事件的绑定接口”

比如键盘事件：

    //通过监听键盘事件来获取按键编码
    function keyEvent(event){
        alert("你按下了"+ event.keyCode + '号键');
    }

    <body onkeydown="keyEvent(event)"></body>

比如鼠标事件：

   <input type="button" value="按下鼠标按键时候触发" οnmοusedοwn="on_mousedown(event);"/ >

    function on_mousedown(event){
         aler("触发了mousedown事"：”+event.target);
    }

3.7.2 DOM事件模型

DOM事件模型（事件响应类型）分为两种：事件冒泡和事件捕获。当click页面中的任意元素时，其所有父元素均会触发该click事件。如果所有元素均绑定了相应的事件响应处理函数的话，则均会依次执行。

事件冒泡模型：事件冒泡最初是微软提出的DOM事件流的模型，顾名思义，就是指浏览器的事件流如同冒泡一样，从容器中的元素最底层到元素最高层。最底层对应的是DOM中最具体的元素，最高层则是最外层元素，最外层元素一般就是document元素。如下图，当点击最底层的div元素时，在冒泡模型中触发的事件流为：div的click事件触发---->父级元素body的click事件触发---->html元素的click事件触发---->顶层的document元素的click事件触发。也即，容器中所有元素都会触发该click事件，只是事件响应的顺序从最底层元素开始，至最高层元素结束。

事件捕获模型：如下图，当点击div元素时，在事件捕获模型中触发的事件流为：最顶层的document的click事件首先被触发---->html元素的click事件触发---->父级元素body的click事件触发---->子容器div的click事件被触发。同样，容器中所有元素均会触发该click事件，只是事件响应顺序从最高层元素开始，至最底层元素结束。

可见，两者的事件触发顺序完全相反。而且，事件的响应类型决定了元素事件触发的顺序，默认情况下，采用的事件响应类型为：事件捕获，即处理事件响应从最高层元素开始，依次向下传递，至最底层元素结束。
更详细及权威的解释可参考官网：JavaScript事件顺序
在这里插入图片描述

3.7.3 事件绑定

事件绑定，就是将事件响应处理函数与DOM事件（如，click事件等）建立关联关系，以对建立关联的事件做出响应处理。主要有三种类型的事件绑定：HTML内联事件处理、DOM0级事件处理、DOM2级事件处理（注：没有DOM1级事件处理）。

总之一句话：事件绑定就是向相关事件侦听器中添加事件响应处理函数。

3.7.3.1 HTML内联事件处理程序

直接在HTML标签事件响应属性中添加事件处理函数

    <h1 id="clickme" onclick="this.innerHTML='谢谢您的配合！';">点我</h1>
    <button onclick="displayDate();">查看当前系统时间</button>

    //格式化显示当前系统时间
    function displayDate(){
        let currentDataTime = new Date();
        let clickme = document.getElementById('clickme');
        clickme.innerHTML = dataFormat("YYYY-MM-dd HH:mm:ss",currentDataTime);
    }

3.7.3.2 DOM0级事件处理程序

使用JavaScript向HTML元素事件分配事件处理函数，如onclick鼠标点击事件。

    //点击按钮，则格式化显示当前系统时间
    document.getElementById("myBtn").onclick = function(){
        let currentDataTime = new Date();
        let clickme = document.getElementById('clickme');
        clickme.innerHTML = dataFormat("YYYY-MM-dd HH:mm:ss",currentDataTime);
    };

注：DOM0事件处理中，相同事件绑定不同事件处理函数，先绑定的事件处理函数均会被最后绑定的事件处理函数所覆盖。

    document.getElementById("myBtn").onclick = function(){alert("早上好")}; //“早上好”事件处理函数被覆盖
    document.getElementById("myBtn").onclick = function(){alert("晚上好")}; //仅会执行“晚上好”事件处理函数

3.7.3.3 DOM2级事件处理程序

使用addEventListener()函数来绑定事件和事件处理函数，即事件委托。

如图所示，每个DOM元素均有一个添加事件侦听器函数：addEventListener()，该侦听器函数直接可以将事件（eventName）和事件处理函数（handle）进行事件绑定，并可以设置该事件的响应类型，false表示捕获（默认），true表示冒泡。
在这里插入图片描述
值得注意的是：上图中的eventName，即事件名称，并没有“on”，例如鼠标单击事件click，鼠标双击事件doubleclick ，鼠标移入事件mouseover，鼠标移出事件mouseout等。

在DOM2级事件处理程序中，相同事件绑定不同事件处理函数，所有事件处理函数都会被执行，而且方法的触发顺序是按照事件监听的顺序来的，即先绑定先响应，后绑定后响应：

    document.getElementById("myBtn").addEventListener("click",myclick1,false);//先响应
    document.getElementById("myBtn").addEventListener("click",function(){alert("晚上好")},false);//后响应

在DOM2级事件处理程序中，事件能够绑定到节点上，自然事件也可以被移除：element.removeEventListener(eventName, functionName,useCapture)，其中参数同addEventListener()函数。

    document.getElementById("myBtn").removeEventListener("click",myclick1,false);

特别注意： 由于JavaScript通常需要操作DOM，所以，一般把JavaScript脚本放在</body>结束标签前引入。如果在<head>中引入，则通过修改window.onload窗口加载事件响应函数，强制等到DOM加载完成后再执行相关函数。window.onload是在页面资源（比如图片和媒体资源，它们的加载速度远慢于DOM的加载速度）加载和渲染完成之后才执行。

通常，将HTML文件的解析过程，称为dom解析。css解析的过程为cssdom构建。cssdom构建完成后会和dom解析一块构成render渲染树，然后render渲染树会被painting绘制成我们看到的网页。我们文档的解析顺序通常是从上到下按顺序进行解析，但当遇到Javascript标签时会阻塞dom解析——解析进程需要先将javascript代码从web服务器下载并执行完成才能进行dom与cssdom解析。这里就涉及到一个所谓的“生命周期”概念，也即使用javascript脚本操作dom元素及css属性时机选择问题，此时就需要等到所有页面标签加载并渲染完成之后再执行js脚本。

3.7.4 Event事件对象

JavaScript用一个Event对象来封装事件的所有状态信息，比如事件响应元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 JavaScript中，每个事件响应处理函数中都有一个默认的参数：Event事件对象实例event。

    <div onclick=”getEventPropertyValue(event)”></div>

    <script>
        function getEventPropertyValue (event){
           var e = event.target;//获事件触发来源的元素对象（目标对象），本实例中即为div节点元素
        }
    </script>

Event对象包含的属性和方法：

属性	描述
bubbles	返回布尔值，指示事件是否为冒泡事件类型（true)，还是捕获事件类型（false）。
cancelable	返回布尔值，指示事件是否拥有可取消的默认动作。
currentTarget	返回当前触发事件的元素（事件传播过程中遇到的元素）
target	返回触发此事件的元素（事件源头元素）
eventPhase	返回事件传播的当前阶段
timpStamp	返回事件生成的日期和时间
type	返回当前Event对象表示的事件的名称

方法	描述
initEvent()	初始化新创建的Event对象的属性
preventDefault()	禁用默认动作，即通知浏览器不要执行与事件关联的默认动作
stopPropagation()	事件传播到当前元素时，不再继续向上（冒泡）或向下（捕获）传播事件。

event实例对象的几点说明：

1、event实例代表事件的状态，例如触发event事件对象的元素、鼠标的位置及状态、按下的按键等等；

2、event实例只在事件发生或传播的过程中才存在；

3、当event 实例的 cancelable属性为false时，表示事件没有默认行为。一般，a标签、input标签和form表单等存在默认的事件处理行为。