目录

JavaScript前端监听事件移除案例

JavaScript前端监听事件移除案例

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

业务场景

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

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

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

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

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


移除监听事件案例

分享一下前端移除监听事件的相关经验

https://i-blog.csdnimg.cn/blog_migrate/f2fbe95a666127045c14c9e131c3c67e.png#pic_center

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

https://i-blog.csdnimg.cn/blog_migrate/b1cbf8c95f7a0b145e5649f4b453138e.png#pic_center

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

听了下同学的建议 发现 这个就是前端有个监听事件,移除这个监听事件即可

https://i-blog.csdnimg.cn/blog_migrate/24f0d7b3f04e06d3b87c46913f33fa02.png

太菜了自己 哈哈 留下了没有技术的眼泪


具体操作如下

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

②然后找到Event Listeners

③然后找到mouseout

https://i-blog.csdnimg.cn/blog_migrate/12648ffcb17398a990767c7ce70a1662.png

④然后点击移除Remove这个监听事件

https://i-blog.csdnimg.cn/blog_migrate/37654b9b3561a9a4129acb2ecc095823.png

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


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

addEventListener语法
element.addEventListener(typehandlerfalse/true)

type:事件类型

handler:事件执行触发的函数

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

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

事件冒泡子集元素先触发父级元素后触发
removeEventListener语法
element.removeEventListener(typehandlerfalse/true)

type:事件类型

handler:事件执行触发的函数

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

https://i-blog.csdnimg.cn/blog_migrate/ccc8a90a93629cf63c057cf1692ac3e3.png

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


I wish you all progress in your study