Javascript的一些监听事件

简介: Javascript的一些监听事件

JavaScript 提供了许多事件监听功能,使你可以对浏览器中的元素进行操作。下面将演示如何在 HTML 元素上添加一些常见的事件监听器,如点击(click)、鼠标移动(mousemove)和键盘按键(keydown)。

1. 点击事件(Click Event)

html<!DOCTYPE html>
<html>
<body>
 
<p id="demo">点击这里!</p>
 
<script>
// 获取元素
var p = document.getElementById("demo");
 
// 添加点击事件监听器
p.addEventListener("click", function() {
alert("你点击了元素!");
});
</script>
 
</body>
</html>

2. 鼠标移动事件(Mousemove Event)

html<!DOCTYPE html>
<html>
<body>
 
<p id="demo">移动鼠标到这里!</p>
 
<script>
// 获取元素
var p = document.getElementById("demo");
 
// 添加鼠标移动事件监听器
p.addEventListener("mousemove", function(event) {
// 获取鼠标的 x 和 y 坐标
var x = event.clientX;
var y = event.clientY;
 
// 显示坐标
alert("鼠标的 x 坐标: " + x + ", y 坐标: " + y);
});
</script>
 
</body>
</html>

3. 键盘按键事件(Keydown Event)

html<!DOCTYPE html>
<html>
<body>
 
<p id="demo">按下一个键!</p>
 
<script>
// 获取元素
var p = document.getElementById("demo");
 
// 添加键盘按键事件监听器
document.addEventListener("keydown", function(event) {
// 获取按下的键的字符编码
var key = event.keyCode;
 
// 显示字符编码
alert("你按下了键: " + key);
});
</script>
 
</body>
</html>

4. 移除事件监听器

如果你想要移除之前添加的事件监听器,你可以使用 removeEventListener 方法:

html<!DOCTYPE html>
<html>
<body>
 
<p id="demo">点击这里!</p>
 
<button onclick="removeClick()">移除监听器</button>
 
<script>
// 获取元素
var p = document.getElementById("demo");
 
// 添加点击事件监听器
p.addEventListener("click", function() {
alert("你点击了元素!");
});
 
// 定义移除监听器的函数
function removeClick() {
p.removeEventListener("click", function() {
alert("你点击了元素!");
});
}
</script>
 
</body>
</html>

注意:在移除监听器时,你需要传递与添加监听器时相同的函数。如果传递了不同的函数,即使函数体相同,它也不会移除任何监听器。这是因为 JavaScript 中函数的比较基于引用,而不是基于函数体的内容。

目录
相关文章
|
30天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
27 2
|
7天前
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
JS 监听用户页面访问&页面关闭操作并进行数据上报 第一次进入页面时触发页面访问 刷新当前页面时触发页面访问 新 tab 进入页面时触发页面访问 当前页面点击 nav 进入其他模块时,触发页面关闭&页面访问 关闭页面时触发页面关闭
12 0
|
18天前
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
该文主要讨论了一个网页安全项目的需求和实现,涉及用户访问和离开页面时的数据报告。需求包括首次进入、刷新、新标签页打开、导航切换以及页面关闭时的数据发送。技术要点包括使用Cookie和SessionStorage存储信息,事件监听以及navigator.sendBeacon方法进行数据发送。实现策略包括轮询检测URL变化和在unload事件中触发页面关闭报告。文章还提到了相关流程图和代码示例,总结中强调了数据上报在用户行为分析中的重要性。
|
28天前
|
消息中间件 存储 设计模式
JavaScript发布订阅模式:实现事件驱动编程!
JavaScript发布订阅模式:实现事件驱动编程!
|
28天前
|
设计模式 存储 消息中间件
JavaScript观察者模式:实现对象间的事件通信!
JavaScript观察者模式:实现对象间的事件通信!
|
29天前
|
存储 JSON JavaScript
Node.js 上开发一个 HTTP 服务器,监听某个端口,接收 HTTP POST 请求并处理传入的数据
Node.js 上开发一个 HTTP 服务器,监听某个端口,接收 HTTP POST 请求并处理传入的数据
21 0
|
30天前
|
JavaScript 前端开发 开发者
javascript事件大全
javascript事件大全
18 1
|
30天前
|
移动开发 JavaScript 前端开发
javascript监听浏览器离开、进入行为
javascript监听浏览器离开、进入行为
19 0
|
30天前
|
JavaScript 前端开发
js的事件介绍
js的事件介绍
25 1
|
30天前
|
JavaScript 前端开发
js的事件
js的事件
26 1