开发者社区开发与运维文章正文

DOM 事件机制

2022-12-27 45

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： DOM 事件机制

当我们给这三个div,都各自加上一个点击事件，

当我点击“哈哈”的时候，会是谁触发呢？big?middle还是small

答案是都触发

那会先执行big的点击事件还是middle还是small呢？

W3C的标准是：先从外向内执行，再从内向外执行

<div class="big">
  <div class="middle">
    <div class="small">
          哈哈
    </div>
  </div>
</div>

从外向内找监听函数，叫事件捕获

从内向外找监听函数，叫事件冒泡

啊？？那岂不是每个函数执行两次？

不是的，开发者可自己选择把fnYe放在捕获阶段还是冒泡阶段

文章标签：

JavaScript

开发者

关键词：

dom事件机制

worlds

~black-

8月前

存储 JavaScript 前端开发

JavaScript Day11 DOM事件机制

~black-

46 0 0

小調不吃辣

JavaScript 前端开发程序员

DOM 事件模型或 DOM 事件机制

小調不吃辣

110 0 0

穆雄雄.

28天前

JavaScript 前端开发

JavaScript操作DOM元素

穆雄雄.

11 1 1

众所周知

1月前

JavaScript 前端开发

如何使用 JavaScript 操作 DOM？

众所周知

13 0 0

东方睿赢

4月前

JavaScript 前端开发

JavaScript DOM 操作：什么是事件委托（Event Delegation）？有什么优势？

东方睿赢

55 1 1

东方睿赢

4月前

JavaScript 前端开发

JavaScript DOM 操作：如何动态创建和插入元素？

东方睿赢

42 1 1

东方睿赢

4月前

JavaScript 前端开发安全

JavaScript DOM 操作：解释一下 `innerHTML` 和 `textContent` 的区别。

东方睿赢

42 1 1

东方睿赢

3天前

存储 JavaScript 前端开发

JavaScript DOM 操作：解释一下 cookie、sessionStorage 和 localStorage 的区别。

Cookie是服务器发送至客户端的文本信息，会随每个请求发送回服务器，适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据，关闭浏览器后清除，适合临时存储如登录状态。LocalStorage则持久保存数据，即使关闭浏览器也不会清除，适用于存储长期设置。三种方式各有侧重，应按需求选择。

东方睿赢

9 0 0

龙大吉

3天前

JavaScript 前端开发安全

JavaScript DOM 操作：解释一下浏览器的同源策略。

**同源策略**是浏览器安全基石，它阻止脚本跨不同协议、域名或端口访问资源，防止恶意行为。例如，HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求，但需服务器配合设置，通过`document.domain`属性可配置，但仍受限于服务器配置。

龙大吉

9 4 4

天玄TX

16天前

JavaScript 前端开发