事件监听与移除方法

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。

你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。

addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

Note注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。
Mapbox GL JS 是一个用于在网页上嵌入交互式地图的 JavaScript 库。在 Mapbox 中,如果你之前为地图添加了鼠标移动事件监听器,想要移除这个监听器,可以使用 JavaScript 的 `removeEventListener` 方法。以下是一个基本的示例来说明如何移除地图的鼠标移动事件监听器: 首先,你需要获取 Mapbox 地图的实例,然后添加鼠标移动事件监听器。之后,如果你决定不再需要该监听器,可以通过调用 `removeEventListener` 方法并传入相同的事件类型和监听器函数来移除它。 ```javascript // 假设 map 是你的 Mapbox 地图实例 // 添加鼠标移动事件监听器 map.on('mousemove', function(e) { // 事件处理逻辑 console.log(e.point); // 例如,打印鼠标所在位置的经纬度 }); // 在某个条件下决定移除鼠标移动事件监听器 map.off('mousemove', function(e) { // 这里应该是之前添加监听器时使用的同一个函数引用 }); ``` 请注意,在调用 `removeEventListener` 时,你需要提供与 `addEventListener` 相同的函数引用。如果你使用了一个匿名函数作为监听器,那么你将无法直接移除它,因为无法引用到同一个函数实例。为了避免这种情况,你可以使用具名函数或者将匿名函数赋值给一个变量。 ```javascript // 使用具名函数作为事件监听器 function handleMouseMove(e) { console.log(e.point); } // 添加事件监听器 map.on('mousemove', handleMouseMove); // 移除事件监听器 map.off('mousemove', handleMouseMove); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值