JavaScript前端监听事件移除案例

学完计算机专业小结一下:如何利用JavaScript解决这样的网课只能在固定界面观看视频观看的问题

业务场景

场景1、常见如网课听课,不能离开当前的屏幕,同时过一段时间要移动鼠标

场景2、如小程序或者网页的考试,可能涉及到切屏的此时,前端可以监听切屏次数,如达到五次,试卷自动提交

场景3、部分网页的文字无法复制,如果复制会提示开会员等

如上等等都是前端的监听事件

当我们执行某种操作时候前端会监听,同时执行某些函数命令


移除监听事件案例

分享一下前端移除监听事件的相关经验
在这里插入图片描述

经常我们看视频的时候可以发现有时候,鼠标一移动,鼠标移播放界面,后台视频就自动暂停了。

在这里插入图片描述

这里涉及到JavaScript里面的一个监听组件!作为一个计算机系的学生怎么能不知道这个监听事件呢哈哈?

听了下同学的建议 发现 这个就是前端有个监听事件,移除这个监听事件即可
在这里插入图片描述
太菜了自己 哈哈 留下了没有技术的眼泪


具体操作如下

①Fn+F12,这样可以看到前端界面的源码

②然后找到Event Listeners

③然后找到mouseout

在这里插入图片描述
④然后点击移除Remove这个监听事件
在这里插入图片描述

这样我们就可以自由的观看了


addEventListener() ,removeEventListener()均为事件绑定操作,一个增加事件绑定,一个是移除事件绑定

addEventListener语法
element.addEventListener(type,handler,false/true)

type:事件类型

handler:事件执行触发的函数

false/true:false为冒泡/ture为捕获,参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。

事件捕获:父级元素先触发,子集元素后触发;

事件冒泡:子集元素先触发,父级元素后触发
removeEventListener语法
element.removeEventListener(type,handler,false/true)

type:事件类型

handler:事件执行触发的函数

false/true:false为冒泡/ture为捕获,参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。

在这里插入图片描述

感谢阅读,祝大家学业进步


I wish you all progress in your study

  • 15
    点赞
  • 57
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 11
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员橙子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值