JS为元素添加一次性触发事件

最新推荐文章于 2021-10-13 16:19:02 发布
最新推荐文章于 2021-10-13 16:19:02 发布
阅读量1.7w 收藏
点赞数
分类专栏： 前端学习 文章标签： js javascript 一次性事件 事件监听
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woaidouya123/article/details/105188678
版权

可使用arguments的callee属性配合removeEventListener方法实现事件的移除

element.addEventListener( "EventName", function(){
	//TODO
    element.removeEventListener("EventName", arguments.callee);
});

注：arguments.callee在严格模式下无法使用 

我爱吃豆芽呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
01-21
本文实例讲述了JS实现为动态添加的元素增加事件功能。分享给大家供大家参考，具体如下： 我们在日常开发中有时会通过js创建一些元素，但是如果使用原始的for循环给创建的节点添加事件的方法往往行不通： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.jb51.net js动态添加事件</title> </head> <body> 123 123 <li
JS 一次性事件问题
weixin_34112900的博客
03-02 470
项目的需求就是不能重复提交 是通过click点击事件提交数据，到这里的时候想了很多办法，比如说销毁这个点击事件， 但是这个实现起来是相对比较麻烦的，后面想到了一个相对比较简单的办法 通过推荐判断 JS 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　var isFirst=true;//先设定条件为true 　　　　　　　　　　　　　　...
如何在JavaScript中创建一次性事件
10-21 541
有时一个事件只需要调用一次在你的页面。 例如，单击缩略图加载并播放视频文件，或点击“更多”图标，它可通过Ajax检索并显示额外的内容。 然而，你可能已经定义的事件处理程序被称为每一个动作发生的时间。 充其量，这是一个有点低效和浏览器保留不必要的资源。 在最坏的情况，您的处理程序可以做一些意想不到的或重载数据是已经可用。 幸运的是，这是比较容易的JavaScript来创建一次性的事件处理程序。 ...
js事件只触发一次
weixin_42154825的博客
03-30 2876
设flag变量标识，避免聚焦时反复被触发，其他事件同理 var education = { "0": "普高/中职", "1": "大专", "2": "普通本科", "3": "985/211/双一流", "4": "硕士", "5": "博士" ...
Node.js 用回调处理一次性事件
hhhh222222的博客
09-03 224
为了在程序中演示回调的用法，我们来做一个简单的HTTP服务器，让它实现如下功能： 异步获取存放在JSON文件中的文章的标题； 异步获取简单的HTML模板； 把那些标题组装到HTML页面里； 把HTML页面发送给用户。 最终结果如下所示： 一个包含文章标签的列表：titles.json： [ "Kazakhstan is a huge country... what
jQuery动态添加元素无法触发绑定事件的解决方法分析
10-18
主要介绍了jQuery动态添加元素无法触发绑定事件的解决方法,结合实例形式分析了动态添加元素无法绑定事件的原因与相关解决方法,需要的朋友可以参考下
js onmousewheel事件多次触发问题解决方法
10-25
做一个首屏和第二屏之间滚动鼠标滚轮就可以整平切换的效果，遇到了很多问题，下面是问题解决方法
解决layui动态添加的元素click等事件触发不了的问题
12-13
在页面加载完成时候 ‘.add_project’ 元素是可以触发click时间的，当动态添加 ‘.add_project’ 时候，新添加的元素却触发不了click事件，类似下面的写法： $(".add_project").on('click', function(){ alert&#40...
JS实现select选中option触发事件操作示例
10-18
主要介绍了JS实现select选中option触发事件操作,结合实例形式总结分析了javascript针对select下拉选中option项触发事件相关操作技巧,需要的朋友可以参考下
js中一次性注册多个事件
weixin_34318272的博客
02-26 156
在js中，如果想一次性给一个控件或者标签初测多个事件的方法： 假如有个<input>标签： <input id=”inputValue” value=”www.baidu.com”/> 现在要对这个input标签，同时注册失去焦点（blur）和按enter事件（e.key...
JS实现为动态创建的元素添加事件操作示例
10-18
主要介绍了JS实现为动态创建的元素添加事件操作,涉及javascript页面元素动态添加及事件响应相关操作技巧,需要的朋友可以参考下
通过JS为HTML元素添加事件理解
笃行淡言
05-03 450
先看两段代码 代码段A： function myFunction(a, b) { return a * b; } 现在的时间是?简介：当点击这个按钮的时候执行onclick中指定的方法。 代码段B: 现在的时间是?简介：当点击这个按钮的时候执行onclick中指定的代码。 总结：有上述两段代码可知，在 为HTML元素添加事件的时候，事件关键字的双引号中本质上是赋值JS代码，非必
js插入单击事件_只需单击一次即可插入任何特殊字符
culunyi0802的博客
09-22 434
js插入单击事件Have you ever tried to insert a special character such as the cent sign or the copyright symbol, only to realize that this key isn’t available on your normal keyboard? Here’s how you can make...
JS 为某个元素添加事件处理函数的写法
只会写HelloWorld的专栏
10-13 934
写法一：推荐方法。用object.addEventListener("click", myScript) 具体写法如下： <!DOCTYPE html> <html> <body> <p>本例使用 addEventListener() 方法将 "click" 事件附加到 p 元素。</p> <p id="demo">点击我.</p> <script> document.getElementById("
Leanote——搭建自己的私人笔记服务器
热门推荐
我爱吃豆芽呀
08-07 3万+
话说好记性不如烂笔头，把平常遇到的问题通过笔记记下来对于程序猿来说实在是太有用了，找了一些笔记软件，除了oneNote,大多数都不免费提供云端同步功能。然而微软的服务器感觉速度实在太慢，而且不支持markdown功能。 最后让我找到了leanote,这是一个开源的笔记框架，你可以将它搭建在自己的服务器上。客户端支持windows/Mac/Linux/Android/IOS ,实在是相当强大。最关...
JS简易实现导航栏滑到顶部固定
我爱吃豆芽呀
08-09 2万+
适用场景如下图所示： 适用于导航栏顶部有滑动时需要隐藏的内容。 实现思路：利用position:fix 的css属性能够实现元素固定在屏幕的某一位置，配合 top:0px;可实现将导航栏固定在顶部。 故，可通过JS监听屏幕的滚动，当导航栏滚动到屏幕顶部时，修改导航栏的position属性。 简易DEMO代码如下： &lt;!-- 此处引入百度的cdn,方便调试 --&gt; &lt...
关于npm依赖包全局安装后报依赖包找不到的解决方法
我爱吃豆芽呀
12-24 2万+
npm全局安装命令 npm install -g <package_name> 如果安装之后仍然报依赖包找不到，原因大概率是未配置npm依赖包的环境变量 配置方法： 1.Windows环境 增加环境变量 NODE_PATH 指向到全局包的安装路径 关于全局包的安装路径，默认路径为C盘用户目录下C:\Users\用户名\AppData\Roaming\npm\node_mo...
web前端读取串口数据
我爱吃豆芽呀
04-22 2万+
来自扫码枪应用适配的经验及扩展。 查了好多资料，发现实现思路不外乎以下几种： 1.使用服务端开发语言开发一个读取串口数据的本地服务模块，并实现websocket长连接支持，前端开启长连接到该服务，根据推送的数据进行操作。 2.针对IE浏览器，可以采用ActiveX插件读取串口数据，根据插件的API进行开发。 3.对于chrome浏览器，可以使用Chrome.serial实现 这几种方式本质区别不大...
echarts图表设置全局颜色
我爱吃豆芽呀
01-06 2万+
当项目需要定制echarts图表的颜色时，可以采用以下两种方法： 1.使用官方的主题定制工具 可以在基本配置里面修改颜色和顺序 在官方提供的构建工具里还可以其他各种配置的定制选择。 2.如果只是简单的改变颜色，并且你也已经准备好了颜色代码，那么可以通过直接修改本地加载的echarts.js或者echarts.min.js文件来修改全局颜色。 打开js文件，全文搜索globalD...
element，vue2，卡片，前端自己实现懒加载，一次性把后端数据请求完，用卡片的形式，排版为每行三个卡片，用滚动条懒加载怎么实现
最新发布
06-09
对于滚动条懒加载，你可以使用IntersectionObserver API来实现。IntersectionObserver API可以监听元素是否进入了视口，并在需要时执行回调函数，因此可以用来实现滚动条懒加载。 具体实现步骤如下： 1. 首先需要在页面中引入IntersectionObserver API，并在代码中创建一个IntersectionObserver对象。 ```javascript const observer = new IntersectionObserver(callback, options); ``` 其中，callback是回调函数，options是配置选项。 2. 然后，将需要懒加载的元素添加到IntersectionObserver对象中。 ```javascript const targets = document.querySelectorAll('.card'); targets.forEach(target => observer.observe(target)); ``` 这里以`.card`类为例，将所有需要懒加载的卡片元素添加到IntersectionObserver对象中。 3. 在回调函数中实现懒加载的逻辑。 ```javascript function callback(entries, observer) { entries.forEach(entry => { if (entry.isIntersecting) { // 加载数据 // ... // 停止观察该元素 observer.unobserve(entry.target); } }); } ``` 在回调函数中，当一个元素进入视口时，执行加载数据的逻辑，并停止观察该元素，以避免重复加载。 4. 最后，实现滚动条的监听，并在滚动到底部时触发懒加载。 ```javascript window.addEventListener('scroll', () => { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; if (scrollTop + clientHeight >= scrollHeight) { // 滚动到底部，执行懒加载 // ... } }); ``` 在滚动条滚动到底部时，执行懒加载的逻辑即可。 以上就是实现滚动条懒加载的基本步骤。需要注意的是，为了避免滚动条滚动过快导致的重复加载，可以设置一个加载标记，当正在加载数据时，不再执行懒加载的逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值