16 —— 扩展 —— 事件传播 及 浏览器的事件处理
一,事件传播
顺序 : 捕获 => 目标 => 冒泡
1,事件的冒泡
2,事件的捕获
从外往里j进入,叫做事件的捕获过程 。
事件的处理程序发生在冒泡阶段,而不是捕获阶段
举例说明:
例:点击d3
(1) html => body => d1 => d2 => d3 事件的捕获阶段
(2) 到达 d3 事件的目标阶段
(3) d3 => d2 => d1 => body =>html 事件的冒泡阶段
<html>
<body>
<div id="d1">
d1
<div id="d2">
d2
<div id="d3">
d3
</div>
</div>
</div>
<script>
var d1 = document.getElementById('d1')
var d2 = document.getElementById('d2')
var d3 = document.getElementById('d3')
d1.onclick = ()=>{
alert('d1')
}
d2.onclick = ()=>{
alert('d2')
}
d3.onclick = ()=>{
alert('d3')
}
</script>
——————————————————————————
二,事件绑定的三种形式
1,行内绑定
2,动态绑定
d1.onclick = ()=>{}
3,事件监听
/* 事件绑定 —————> 事件监听
* 第三个参数决定这个程序在什么阶段触发
* true => 触发阶段在捕获阶段触发
* 一经捕获,立即执行
*/
d1.addEventListener('click', () => { alert('hello d1') }, true)
d2.addEventListener('click', () => { alert('hello d2') }, false)
d3.addEventListener('click', () => { alert('hello d3') }, true)
分类:
实战
, JavaScript
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用