第 17 章事件

事件代表文档或浏览器窗口中某个有意义的时刻,JavaScript 与 HTML 的交互是通过事件实现的
页面行为（在 JavaScript 中定义）与页面展示（在 HTML 和 CSS 中定义）的分离。

17.1 事件流
事件流描述了页面接收事件的顺序
17.1.1 事件冒泡
IE 事件流被称为事件冒泡，这是因为事件被定义为从最具体的元素（文档树中最深的节点）开始触发，然后向上传播至没有那么具体的元素（文档）
```
<!DOCTYPE html>
<html>
<head> <title>Event Bubbling Example</title>
</head>
<body> <div id="myDiv">Click Me</div>
</body>
</html>
在点击页面中的<div>元素后，click 事件会以如下顺序发生：
(1) <div>
(2) <body>
(3) <html>
(4) document
```
所有现代浏览器都支持事件冒泡
17.1.2 事件捕获
事件捕获的意思是最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标前拦截事件。
如果前面的例子使用事件捕获，则点击

元素会以下列顺序触发 click 事件： (1) document (2)

(3)body(4)div

在事件捕获中，click 事件首先由 document 元素捕获，然后沿 DOM 树依次向下传播，直至到达实际的目标元素
通常建议使用事件冒泡。
17.3 事件对象
在 DOM 中发生事件时，所有相关信息都会被收集并存储在一个名为 event 的对象中。
```
let btn = document.getElementById("myBtn");
btn.onclick = function(event) { console.log(event.type); // "click"
};
btn.addEventListener("click", (event) => { console.log(event.type); // "click"
}, false)
```
所有事件对象都会包含下表列出的这些公共属性和方法。
bubbles 布尔值只读表示事件是否冒泡
addEventListener()方法来指定事件处理程序。与其他事件一样，事件处理程序会接收到一个 event 对象。
```
window.addEventListener("load", (event) => { console.log("Loaded!");
}); 
```
scroll 事件
```
window.addEventListener("scroll", (event) => { if (document.compatMode == "CSS1Compat") { console.log(document.documentElement.scrollTop); } else { console.log(document.body.scrollTop); }
});
```
以上事件处理程序会在页面滚动时输出垂直方向上滚动的距离
屏幕坐标鼠标事件不仅是在浏览器窗口中发生的，也是在整个屏幕上发生的。可以通过 event 对象的 screenX 和 screenY 属性获取鼠标光标在屏幕上的坐标。
```
let div = document.getElementById("myDiv");
div.addEventListener("click", (event) => { console.log(`Screen coordinates: ${event.screenX}, ${event.screenY}`);
}); 
```

第 17 章事件相关推荐

《游戏设计艺术（第2版）》——学习笔记（17）第17章有种体验叫作故事
<游戏设计艺术(第2版)>学习笔记(17) 第17章有种体验叫作故事故事/游戏的二象性被动娱乐的迷思梦想事实真实世界方法1:珍珠串真实世界方法2:故事机问题问题1:好的故 ...
java实现备忘录模式_设计模式之第17章-备忘录模式(Java实现)
设计模式之第17章-备忘录模式(Java实现) 好男人就是我,我就是曾小贤.最近陈赫和张子萱事件闹得那是一个沸沸扬扬.想想曾经每年都有爱情公寓陪伴的我现如今过年没有了爱情公寓总是感觉缺少点什么.不知道 ...
【第17章】网络安全应急响应技术原理与应用（软考: 信息安全工程师） --学习笔记
第17章网络安全应急响应技术原理与应用 17.1 网络安全应急响应概述居安思危,思则有备,有备无患.网络安全应急响应是针对潜在发生的网络安全事件而采取的网络安全措施. 17.1.1 网络安全应急响 ...
第 17 章垃圾回收器
第 17 章垃圾回收器 1.GC 分类与性能指标 1.1.垃圾回收器概述与分类垃圾回收器概述垃圾收集器没有在规范中进行过多的规定,可以由不同的厂商.不同版本的JVM来实现. 由于JDK的版本处于 ...
【17】强化学习 17章前沿技术
文章目录名词离轨策略折扣过程折扣系数价值函数广义策略迭代(4.6节)或者"行动器一评判器"算法正文 17.1 广义价值函数和辅助任务 1.广义价值函数是什么? 2.辅 ...
【MySQL 第17章_其他数据库日志】
第17章_其他数据库日志 1.MySQL支持的日志 1.1日志类型 1.2日志的弊端 2.慢查询日志(slow query log) 3.1问题场景 3.2 查看当前状态 3.3 启动日志 3.4 查 ...
构建之法第三版 17 章部分草稿
构建之法 17 章人,绩效和职业道德 (<构建之法> 第三版草稿) 2016/12/23 17.1 领导力在软件开发过程中,有很多平等合作,但是也有上下之分的领导/被领导关系,即使都是 ...
第17章　脚本化CSS
第17章脚本化CSS CSS脚本化是网页交互效果的技术基础,使用CSS和JavaScript可以设计网页动画.利用脚本化CSS可以动态地改变HTML属性,如字体颜色.字体大小等,还可以用它设置和改变 ...
CSS3秘笈第三版涵盖HTML5学习笔记13~17章
第13章,构建基于浮动的布局使用的是float(浮动)属性注:float:none值将取消所有浮动,通常只用来取消元素中已经应用的浮动. 切记:不需要给正文的div设计宽度,即使设计成固定宽度也不 ...

第 17 章事件

第 17 章事件相关推荐

最新文章

热门文章

第 17 章 事 件

第 17 章 事 件相关推荐

最新文章

热门文章

第 17 章事件

第 17 章事件相关推荐