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

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

[复制链接]

212

主题

1732

帖子

2254

积分

管理员

非物质文化遗产社会摇传承人

Rank: 9Rank: 9Rank: 9

积分
2254
发表于 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为一些选项的参数

options和useCapture都是第三个参数

useCapture为真是捕捉监听器

比如现在有<div1>

div1

--div2

----div3

捕获阶段就是1-》2-》3

冒泡阶段就是3-》2-》1

监听器分为两种,先执行捕捉监听器,后执行冒泡监听器

而options的capture同理

once表示调用一次自动移除

passive表示在监听器禁止阻止默认行为

signal可以设置AbortSignal,当调用对应的abort函数则移除监听器

由于相对复杂,过多就不再叙述了,有兴趣可以去查阅一些资料

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

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

那这节课就完毕啦!

结语

本文由cxxjackie独家赞助

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

混的人。

7

主题

117

帖子

685

积分

版主

Rank: 7Rank: 7Rank: 7

积分
685

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

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

使用道具 举报

212

主题

1732

帖子

2254

积分

管理员

非物质文化遗产社会摇传承人

Rank: 9Rank: 9Rank: 9

积分
2254
发表于 2021-9-10 20:39:17 | 显示全部楼层
混的人。
回复

使用道具 举报

9

主题

212

帖子

533

积分

开发者

Rank: 6Rank: 6

积分
533

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

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

使用道具 举报

212

主题

1732

帖子

2254

积分

管理员

非物质文化遗产社会摇传承人

Rank: 9Rank: 9Rank: 9

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

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

使用道具 举报

9

主题

212

帖子

533

积分

开发者

Rank: 6Rank: 6

积分
533

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

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

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

使用道具 举报

212

主题

1732

帖子

2254

积分

管理员

非物质文化遗产社会摇传承人

Rank: 9Rank: 9Rank: 9

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

试了一下...还真是,woc
混的人。
回复

使用道具 举报

9

主题

212

帖子

533

积分

开发者

Rank: 6Rank: 6

积分
533

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

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

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

使用道具 举报

212

主题

1732

帖子

2254

积分

管理员

非物质文化遗产社会摇传承人

Rank: 9Rank: 9Rank: 9

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

脑子说我会了
手:你不会
混的人。
回复

使用道具 举报

12

主题

73

帖子

122

积分

注册会员

Rank: 2

积分
122

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

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

使用道具 举报

发表回复

本版积分规则

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