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

李恒道

提示

如果你监控的页面属于框架页面
很可能元素会出现卸载再插入的情况
这个时候请尝试监听上级元素

正文

这里我们可以查询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')

说明我们劫持是成功的

目前很多网页以及组件都会使用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

--div2

----div3

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

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

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

而options的capture同理

once表示调用一次自动移除

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

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

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

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

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

那这节课就完毕啦！

结语

本文由cxxjackie独家赞助

学IT，到黑马，IT黑马，月薪过万不用愁！

无了

g g n b!!!

李恒道

晚柒载 发表于 2021-9-10 20:20
g g n b!!!

ggnb！

cxxjackie

你的oldadd又忘了传this

李恒道

cxxjackie 发表于 2021-9-10 20:41
你的oldadd又忘了传this

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

cxxjackie

李恒道 发表于 2021-9-10 20:57
测试的时候跑通了...就没在意
我日，又忘加了
话说为啥addeventlistener不传this也能跑，页面正常

不传this相当于window.addeventlistener，是的，window也是个EventTarget。

李恒道

cxxjackie 发表于 2021-9-10 21:04
不传this相当于window.addeventlistener，是的，window也是个EventTarget。

试了一下...还真是，woc

cxxjackie

李恒道 发表于 2021-9-10 21:15
试了一下...还真是，woc

其实只要记住一个通用的公式就好了：

1. XXX.apply(this, arguments);

复制代码

XXX是原函数，劫持函数的时候把这句放进去，基本错不了。

李恒道

cxxjackie 发表于 2021-9-10 21:26
其实只要记住一个通用的公式就好了：XXX是原函数，劫持函数的时候把这句放进去，基本错不了。 ...

脑子说我会了
手：你不会

wjy0

hook addeventlistener想不到有什么应用场景