DOM（四）

最新推荐文章于 2024-03-15 14:30:52 发布

VIP文章檬是柠檬的檬826

最新推荐文章于 2024-03-15 14:30:52 发布

阅读量1.4k

点赞数

文章标签： javascript firefox 前端

本文链接：https://blog.csdn.net/weixin_62343228/article/details/123444943

版权

事件进阶

1.注册事件

在JavaScript中，注册事件（绑定事件）有两种方式，即传统方式注册事件和事件监听方式注册事件。

（1）传统方式

元素对象.事件名 = 事件处理程序;
//示例
btn.onclick = function(){}

注意：该方式注册事件的特点在于注册事件的唯一性，即同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。

（2）事件监听方式

事件监听方式：可以给同一个DOM对象同时注册多个事件处理程序（函数）
标准浏览器，包括IE8版本以上的IE浏览器，以及新版的Firefox、Chrome等浏览器，事件监听方式如下：

DOM对象.addEventListener(type,callback,[capture]);

type:表示事件类型（如click、change、mouseover等）
callback：事件处理程序（函数）
capture：可选参数，默认值为false，表示在事件冒泡阶段进行处理；true，表示在事件捕获阶段处理

注意：该方式注册事件的特点在于可以给同一个DOM对象的同一个事件添加多个事件处理程序。

<body>
    <div>
        <button id="btn">按钮</button>
    </div>
    <script>
        var btn = document.querySelector("#btn");

        // btn.onclick = function(){
    
        //     alert("传统方式注册事件")
        // }

        btn.addEventListener("click",function(){
    
            alert("事件监听方式注册事件")
        })
    </script>
</body>

2.删除事件

（1）传统方式：
		DOM对象.事件名 = null;
（2）标准方式
		DOM对象.removeEventListener(type,callback);

3.DOM事件流

事件流是指当事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个过程称之为事件流。

网景（Netscape）公司团队的事件流采用事件捕获方式，而微软（Microsoft）公司的事件流采用事件冒泡方式，W3C对网景公司和微软公司提出的方案进行了中和处理，规定了事件发生后，首先实现事件捕获，但不会对事件进行处理；然后进行到目标阶段，执行当前元素对象的事件处理程序，但它会被看成是冒泡阶段的一部分；最后实现事件的冒泡，逐级对事件进行处理。

在这里插入图片描述

捕获方式：网景公司
冒泡方式：微软公司
先捕获后冒泡：W3C

事件对象

1.什么是事件对象

事件对象（event）：是一个对象，封装了跟事件有关的所有数据。只有在事件发生时才存在，由系统自动创建。是事件处理程序（函数）的默认参数。

2.事件对象的常见属性和方法

e.target：返回触发事件的对象

e.type：事件类型

e.stopPropagation()：阻止事件冒泡

e.preventDefault()：阻止默认事件

3.事件委托

事件委托的原理是，不给每个子节点单独设置事件监听器，而是把事件监听器设置在其父节点上，让其利用事件冒泡的原理影响到每个子节点。

简而言之，就是不给子元素注册事件，给父元素注册事件，让处理代码在父元素的事件中执行。

这样做的的优点在于，只操作了一次DOM ，提高了程序的性能。
例：

<body>
    <ul>
        <li>张三</li>
        <li>李四</li>
    </ul>
    <script>
        var ul = document.querySelector("u

最低0.47元/天解锁文章

檬是柠檬的檬826

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM（四）

事件进阶、事件对象、鼠标事件和键盘事件
复制链接

扫一扫