上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
12下一页
返回列表 发新帖

[油猴脚本开发指南]addEventListener劫持

[复制链接]

118

主题

906

帖子

529

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
529
发表于 2021-9-10 19:49:18 | 显示全部楼层 | 阅读模式

这里我们可以查询MDN文档https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

发现addEventListener来自eventtarget这个对象下的原型中,通常来说我们的dom元素等也都是继承自这个对象的原型链

关于这点我们可以测试一下

EventTarget.prototype.addEventListener=function (){console.log('我被劫持了')}

document.querySelector('body').addEventListener('123')

图片.png

说明我们劫持是成功的

目前很多网页以及组件都会使用addEventListener

其原因在于onxxxx系列的函数相对性能较差,并且addEventListener支持添加多个函数

这时候我们就可以构造一个简单的劫持函数做一个小过滤,来完成addeventlistener的hook操作

let oldadd=EventTarget.prototype.addEventListener
EventTarget.prototype.addEventListener=function (...args){
    console.log('addEventListener',...args)
    oldadd.call(this,...args)
}

addEventListener有四个参数,分别为type,listener,options,useCapture

options以及useCapture为可选选项

type为事件监听类型

关于事件我们可以在https://www.runoob.com/jsref/dom-obj-event.html查询到

注意是不带on的

listener是触发函数,当我们传入的事件监听类型被捕获到,我们就会调用这个函数

options以及useCapture为一些选项的参数,由于相对复杂,这里就不再叙述了,有兴趣可以去查阅一些资料

使用addEventListener后传入了的参数监听,如果想取消需要调用removeEventListener

注意,removeEventListener和addEventListener两个必须传入相同的函数引用,不可以传递两个function函数

那这节课就完毕啦!

结语

本文由cxxjackie独家赞助

学IT,到黑马,IT黑马,月薪过万不用愁!

6

主题

72

帖子

390

积分

实习版主

Rank: 7Rank: 7Rank: 7

积分
390

活跃会员猫咪币纪念章推广达人宣传达人突出贡献三好学生热心会员中秋纪念章

发表于 2021-9-10 20:20:06 | 显示全部楼层
g g n b!!!
是晚柒载哟
回复

使用道具 举报

118

主题

906

帖子

529

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
529
发表于 2021-9-10 20:39:17 | 显示全部楼层
回复

使用道具 举报

5

主题

65

帖子

113

积分

注册会员

Rank: 2

积分
113

活跃会员热心会员突出贡献三好学生猫咪币纪念章中秋纪念章

发表于 2021-9-10 20:41:53 | 显示全部楼层
你的oldadd又忘了传this
回复

使用道具 举报

118

主题

906

帖子

529

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
529
发表于 2021-9-10 20:57:38 | 显示全部楼层
cxxjackie 发表于 2021-9-10 20:41
你的oldadd又忘了传this

测试的时候跑通了...就没在意
我日,又忘加了
话说为啥addeventlistener不传this也能跑,页面正常
我基础不太好...可能有疏漏要哥哥帮忙参谋一下
麻烦哥哥了
回复

使用道具 举报

5

主题

65

帖子

113

积分

注册会员

Rank: 2

积分
113

活跃会员热心会员突出贡献三好学生猫咪币纪念章中秋纪念章

发表于 2021-9-10 21:04:47 | 显示全部楼层
李恒道 发表于 2021-9-10 20:57
测试的时候跑通了...就没在意
我日,又忘加了
话说为啥addeventlistener不传this也能跑,页面正常

不传this相当于window.addeventlistener,是的,window也是个EventTarget。
回复

使用道具 举报

118

主题

906

帖子

529

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
529
发表于 2021-9-10 21:15:23 | 显示全部楼层
cxxjackie 发表于 2021-9-10 21:04
不传this相当于window.addeventlistener,是的,window也是个EventTarget。

试了一下...还真是,woc
回复

使用道具 举报

5

主题

65

帖子

113

积分

注册会员

Rank: 2

积分
113

活跃会员热心会员突出贡献三好学生猫咪币纪念章中秋纪念章

发表于 2021-9-10 21:26:52 | 显示全部楼层
李恒道 发表于 2021-9-10 21:15
试了一下...还真是,woc

其实只要记住一个通用的公式就好了:
  1. XXX.apply(this, arguments);
复制代码
XXX是原函数,劫持函数的时候把这句放进去,基本错不了。
回复

使用道具 举报

118

主题

906

帖子

529

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
529
发表于 2021-9-10 22:38:43 | 显示全部楼层
cxxjackie 发表于 2021-9-10 21:26
其实只要记住一个通用的公式就好了:XXX是原函数,劫持函数的时候把这句放进去,基本错不了。 ...

脑子说我会了
手:你不会
回复

使用道具 举报

12

主题

70

帖子

31

积分

新手上路

Rank: 1

积分
31

猫咪币纪念章活跃会员三好学生

发表于 2021-9-11 10:30:01 来自手机  | 显示全部楼层
hook addeventlistener想不到有什么应用场景
回复

使用道具 举报

发表回复

本版积分规则

快速回复 返回顶部 返回列表