jq 只执行一次的事件绑定函数

您所在的位置：网站首页 › jquery中的什么方法可以实现事件解除控制功能 › jq 只执行一次的事件绑定函数

jq 只执行一次的事件绑定函数

2024-07-14 13:06| 来源: 网络整理| 查看: 265

概览

在前端开发中，有时会希望事件只被调用一次。比如，点击一张缩略图加载视频文件或点击“更多”图标通过AJAX展示额外的内容。当多次点击的时候，事件处理函数会被调用多次，这会造成浏览器多次加载不必要的资源。更坏的情况可能会导致无法预期的事情发生。庆幸的是，使用JavaScript可以很容易的实现只绑定一次的事件。步骤如下：

定义事件处理函数，比如点击事件处理函数点击元素执行事件处理函数移除事件处理函数。原生JavaScript事件绑定

所谓的移除事件处理函数指的是对于给定的元素和事件类型，处理程序在第一次触发事件后会被立即解除绑定。直接上代码：

function once(type, selector, callback) { selector.addEventListener(type, function fn(e) { e.target.removeEventListener(e.type, fn); return callback(e); }, false); }

现在就可以使用once()方法只让事件执行一次了：

once('click', buttonElement, function () { console.log('executed only once.'); });

除此之外，W3C标准提供一个事件绑定方法addEventListener，我们先来看看这个方法的API：

target.addEventListener(type, listener[, options])

其中，options对象提供一个once属性来指定事件绑定的次数，bool值。如果为true表示事件执行之后会自动移除绑定。

var buttonEl = document.getElementById('w3c'); buttonEl.addEventListener('click', function (e) { console.log('W3C标准事件'); },{once: true}); Jquery事件绑定

jQuery提供了一个one()方法实现只绑定一次的事件。更多使用方法请参考one()方法文档。

$("#foo").one("click", function() { console.log("Event fired once!!!"); });

one()其实是调用了on()方法，通过参数控制事件绑定的次数。所以如果想要了解jQuery如何实现事件绑定，请看on()方法的实现。

one: function (types, selector, data, fn) { return on(this, types, selector, data, fn, 1); } Vue事件绑定

Vue中的通过修饰符once实现只触发一次事件处理程序的方式：

【本文地址】

jq 只执行一次的事件绑定函数

jq 只执行一次的事件绑定函数

今日新闻

推荐新闻