第 17 章事件

最新推荐文章于 2024-07-18 17:32:29 发布

weixin_48419976

最新推荐文章于 2024-07-18 17:32:29 发布

阅读量366

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_48419976/article/details/129844132

版权

事件代表文档或浏览器窗口中某个有意义的时刻,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}`); 
}); 
```

weixin_48419976

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第 17 章事件

屏幕坐标鼠标事件不仅是在浏览器窗口中发生的，也是在整个屏幕上发生的。事件捕获的意思是最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标前拦截事件。与其他事件一样，事件处理程序会接收到一个 event 对象。在事件捕获中，click 事件首先由 document 元素捕获，然后沿 DOM 树依次向下传播，直至到达实际的目标元素。事件代表文档或浏览器窗口中某个有意义的时刻,JavaScript 与 HTML 的交互是通过事件实现的。
复制链接

扫一扫