[油猴脚本开发指南]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操作
```javascript
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函数
那这节课就完毕啦！
# 结语
本文由(https://bbs.tampermonkey.net.cn/space-uid-14082.html)独家赞助
学IT，到黑马，IT黑马，月薪过万不用愁！
g g n b!!! 晚柒载 发表于 2021-9-10 20:20
g g n b!!!
ggnb！
你的oldadd又忘了传this{:4_108:} cxxjackie 发表于 2021-9-10 20:41
你的oldadd又忘了传this
测试的时候跑通了...就没在意
我日，又忘加了
话说为啥addeventlistener不传this也能跑，页面正常
我基础不太好...可能有疏漏要哥哥帮忙参谋一下
麻烦哥哥了
李恒道 发表于 2021-9-10 20:57
测试的时候跑通了...就没在意
我日，又忘加了
话说为啥addeventlistener不传this也能跑，页面正常
不传this相当于window.addeventlistener，是的，window也是个EventTarget。 cxxjackie 发表于 2021-9-10 21:04
不传this相当于window.addeventlistener，是的，window也是个EventTarget。
试了一下...还真是，woc 李恒道 发表于 2021-9-10 21:15
试了一下...还真是，woc
其实只要记住一个通用的公式就好了：XXX.apply(this, arguments);XXX是原函数，劫持函数的时候把这句放进去，基本错不了。 cxxjackie 发表于 2021-9-10 21:26
其实只要记住一个通用的公式就好了：XXX是原函数，劫持函数的时候把这句放进去，基本错不了。 ...
{:4_98:}脑子说我会了
手：你不会 hook addeventlistener想不到有什么应用场景