[油猴脚本开发指南]元素规则校验和检测的触发

李恒道 · 发表于 2022-8-8 10:55:21

szzxc 发表于 2022-8-8 10:52
按照教程focus聚焦

input输入内容

先验一下他用的啥技术方案在做针对吧

szzxc · 发表于 2022-8-8 15:38:11

原来要onfucsm input, value = 'XXXX'
onchange, blur,几个按顺序才能填写和触发，其中一个网站已经可以登录了。

李恒道 · 发表于 2022-8-8 16:47:45

szzxc 发表于 2022-8-8 15:38
原来要onfucsm input, value = 'XXXX'
onchange, blur,几个按顺序才能填写和触发，其中一个网站已经可以登 ...

嗯
搞定就好~哥哥牛逼！

szzxc · 发表于 2022-8-9 09:44:31

图片.png
这里可以看到事件监听器是没有的

这时候我们可以尝试使用

const evt = new Event('change');
ele.dispatchEvent(evt);
const prop = Object.keys(ele).find(p => p.startsWith('__reactEventHandlers'));
ele[prop].onChange(evt);
这个react 试了，好像可以用了

steven026 · 发表于 2022-8-16 23:35:53

话说哥哥是不是能补充一下事件委托的内容？
https://bbs.tampermonkey.net.cn/ ... ptid=2911&pid=32906

比如这个网站https://jingyan.baidu.com/edit/content
一个div下面有3个select，改变一个selcet后会触发change事件改变后一个select
但是change事件不是直接绑定给select的，而是div的事件委托，所以要用select.dispatchEvent(new Event("change",{bubbles:true}))来触发

另外我发现一个很奇怪的点，事件侦听器不勾选Framework侦听器反而能侦听到更多事件？
6F_%4DCCS%`U(T)F}OYGQL0.png

最后测试一下at功能 @李恒道

李恒道 · 发表于 2022-8-16 23:53:35

steven026 发表于 2022-8-16 23:35
话说哥哥是不是能补充一下事件委托的内容？
https://bbs.tampermonkey.net.cn/ ... ptid=2911&pid=32906

Framework侦听器那个我也不知道
这个页面也是换汤不换药的可以直接拿handler
教程里面的内容已经完全覆盖到了
所以就不补了~
-------------------
补充
冒泡触发好像真的可以加...
我明天补一下

steven026 · 发表于 2022-8-17 09:28:18

李恒道发表于 2022-8-16 23:53

Framework侦听器那个我也不知道
这个页面也是换汤不换药的可以直接拿handler
教程里面的内容已经完全覆盖 ...

这个Framework侦听器巨坑人……我一开始按哥哥的指南是一直勾上的【哥哥全锅🙄

然后昨天我下DOM断点属性修改逆了半天，在堆栈里面发现了传入的是个change事件，但是鬼故事的是select的祖先元素根本没有change事件……
select的属性里面有jQuery加一长串数字，说明是有事件监听的，用jQuery().change()能触发，但就是没找到这事件在哪（当时我用$._data只试了select和document发现都没找到）

后来我想试试原生的，dispatchEvent(new Event("change"))根本不触发，研究了半天，我还以为是那段混淆过的代码里面加了某个Event属性的验证，差点都要上Proxy把每个Event属性都强制劫持一遍，看看到底是哪个属性不对触发的
然后我google查到有一个能遍历所有DOM绑定的jQuery事件的js，才发现change事件是委托给那个div的，但是Devtools里div的事件侦听器里面一片空白，于是开始乱点，后面发现把Framework侦听器的勾去掉change事件就显示出来了真的MMP……

李恒道 · 发表于 2022-8-17 09:38:15

steven026 发表于 2022-8-17 09:28
[md]这个Framework侦听器巨坑人……我一开始按哥哥的指南是一直勾上的【哥哥全锅🙄

然后昨天我下DOM断点 ...

我晚上研究一下这玩应到底是啥....
呜呜呜呜

cxxjackie · 发表于 2022-8-17 20:29:39

李恒道发表于 2022-8-16 23:53
Framework侦听器那个我也不知道
这个页面也是换汤不换药的可以直接拿handler
教程里面的内容已经完全覆盖 ...

new Event的bubbles默认值是false，而真实事件的bubbles通常都是true，碰到这种委托的确实得改bubbles，或者说要更通用的话最好全改成true。

cxxjackie · 发表于 2022-8-17 20:35:07

steven026 发表于 2022-8-17 09:28
[md]这个Framework侦听器巨坑人……我一开始按哥哥的指南是一直勾上的【哥哥全锅🙄

然后昨天我下DOM断点 ...

framework监听器是chrome自己搞出来的，其作用是尝试解析框架的事件委托，比如jQuery的委托，不勾选的话事件会定位到jQuery源码，勾选后有可能定位到源头（实际上没这么智能）。然而框架毕竟多种多样，这种解析很不靠谱，像Vue、React的就完全没用，jQuery视不同版本也可能有bug，像这个例子的change事件估计被定位到别的事件那去了。这玩意我记得以前是没有的，后面不知道哪个版本加进来了，开不开看个人吧，我的建议是默认不勾选，需要时勾一下看看就好。

[油猴脚本开发指南]元素规则校验和检测的触发

发表回复

荣誉开发者

卓越贡献

油中2周年

生态建设者

油中3周年

挑战者 lv2

喜迎中秋

新人进步奖

新人报道