【JavaScript】DOM 事件的传播机制

事件与事件流

事件,这里指和网页进行互动。比如点击链接,移动鼠标等网页被触发,做出响应,形成交互。

js 采用事件监听器来监听事件是否发生。

事件流

事件流描述了从页面中接收事件的顺序。当一个事件发生在某个元素上时,它会沿着元素层次结构向上传播或向下传播,这就是事件流。事件流分为冒泡阶段和捕获阶段。

事件冒泡流

事件冒泡是指事件从最具体的元素开始(例如用户点击的按钮),然后逐级向上传播至最不具体的节点(例如 document)(现在某些浏览器会一直冒泡到 window 对象)。在事件冒泡过程中,事件会逐级触发每个父元素的相同事件,进而触发这些事件对应的处理函数。

事件捕获流

事件捕获与事件冒泡相反,事件从最不具体的节点开始(例如 document),然后逐级向下传播至最具体的节点(例如用户点击的按钮)。在事件捕获过程中,事件会逐级触发每个祖先元素的相同事件,进而触发这些事件对应的处理函数。

标准 DOM 事件流

标准 DOM 事件流包括三个阶段:

  • 捕获阶段: 事件从 window 对象开始,逐级向下传播至目标元素。
  • 目标阶段: 事件到达目标元素,触发目标元素上绑定的事件处理函数,此时事件才会发生并处理,而且本次事件处理会被看成是冒泡阶段的一部分。
  • 冒泡阶段: 事件从目标元素开始,逐级向上传播至 window 对象(某些浏览器)。

image.png

事件委托(事件代理)

事件委托,又被称之为事件代理。在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面整
体的运行性能。导致这一问题的原因是多方面的。

首先,每个函数都是对象,都会占用内存。内存中的对象越多,性能就越差。其次,必须事先指定所有事件
处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间。

对事件处理程序过多问题的解决方案就是事件委托。

事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。例如,click事件会
一直冒泡到document层次。也就是说,我们可以为整个页面指定一个onclick事件处理程序,而不必给每个
可单击的元素分别添加事件处理程序。

优点:

  1. 只用在父元素上绑定相应事件,绑定的事件更少,页面的效率更高
  2. 子元素的兄弟元素事件不用重复添加
<body>
<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
<script>
    // 目标:为 li 添加点击事件
    // const lis = document.getElementsByTagName('li')
    // for (let i = 0; i < lis.length; i++) {
    //     lis[i].onclick = function () {
    //         console.log('li 触发点击事件')
    //     }
    // }
    // 使用事件委托来优化代码
    const ul = document.getElementById('ul')
    ul.onclick = function (event) {
        if (event.target.nodeName === 'LI') {
            console.log('li 触发点击事件')
        }
    }
</script>
</body>
  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JavaScript事件是指在网页中发生的各种交互动作,比如点击、鼠标移动、键盘输入等。通过JavaScript可以为元素添加事件监听器,以便在事件发生时执行相应的操作。常见的JavaScript事件包括mouseover、mouseenter、load、blur、focus、change、input、invalid、select、submit、click等。\[1\]\[2\]\[3\] DOM操作是指通过JavaScript来操作网页中的DOM元素,包括创建、修改、删除元素,修改元素的属性和样式等。通过JavaScript可以获取元素、修改元素的内容、样式、属性等。常见的DOM操作包括获取元素、修改元素的内容、样式、属性等。常见的DOM操作包括getElementById、innerText、innerHTML等。\[1\]\[2\]\[3\] 通过JavaScript事件DOM操作,我们可以实现网页的交互功能,比如点击按钮弹出确认框、表单验证、动态修改网页内容等。 #### 引用[.reference_title] - *1* *3* [JavaScript基础: DOM操作中常用事件](https://blog.csdn.net/u011863822/article/details/124199744)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [JavaScript DOM文档事件](https://blog.csdn.net/m0_67942533/article/details/126743405)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小秀_heo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值