写脚本的时候dom标签的事件没有触发怎么办
本帖最后由 wwwwwllllk 于 2023-3-31 18:22 编辑道哥写的文章基本讲的很清楚了，建议多读几遍。
https://bbs.tampermonkey.net.cn/thread-1250-1-1.html
# 思路
1.比如我要操作一个button的点击事件,但是发现这个事件没触发操作，我们这个时候要想一下
是不是这个标签是没有这个事件，还是被阻止了，又或者是绑到子级标签下面了，又或者就是
因为元素存在数据校验或者规则校验，我们触发一下规格校验使其正常检测一下就可以运行了
(这种情况input就很常见，大家看上面道哥的文章)
```
document.querySelector("#fastpostsubmit").click()
```
# 接下来通过实例讲下操作react的网页的input框
获取标签按照图片操作
!(data/attachment/forum/202212/19/200233cgjfgz7fwexwd73z.png)
!(data/attachment/forum/202212/19/200501gyizz61pytz6jteb.png)
!(data/attachment/forum/202212/19/200611nm7lcdcrp3buzuku.png)
```
document.querySelector("body > div:nth-child(25) > div > div > div > div.ant-modal-content > div > div > span > input").value = '1'
```
接下来看下怎么操作才可以触发
!(data/attachment/forum/202212/19/200824r4zrzm8rmdgujt1l.png)
!(data/attachment/forum/202212/19/201020tt2n0rddrxrnttbe.png)
我们往input输入内容肯定是触发的onChange方法，但是我们都知道onChange默认都会传入event参数。从而拿到event.target.value值。(道哥文章里面的操作我没看太懂，但是我这里发现一个思路也可以)
我直接就给你传入一个类似结构的对象
```
let event = {
target: {
value: '哥哥yyds'
}
}
```
!(data/attachment/forum/202212/19/201438z0nmi8vmnism8or1.png)
别的事件参考这个就可以了。
完成代码
```javascript
// 拿到操作的标签
let inputDom = document.querySelector("body > div:nth-child(25) > div > div > div > div.ant-modal-content > div > div > span > input")
let event = {
target: {
value: '哥哥yyds'
}
}
inputDom.__reactEventHandlers$s5w19djtwkp.onChange(event)
```
# 下面的内容是我随时补充的，目的就是为了总结遇到的不同情况所以可能就无法连贯来读
1.这种情况就是我需要先触发focus，然后需要设置一个定时器再来触发下面的事件
!(data/attachment/forum/202303/31/182145azuxkdbxzqpd7qdz.png)
确实可以构造一个假事件传进去，但仅限那些对参数验证不太严谨的事件，有些可能不止检查value，甚至包含类型判断，这样就不如传一个真事件进去更加通用。new Event用于构造真事件，dispatchEvent用于将target绑到对应节点上。不过某些情况传假事件更有优势，比如过isTrusted验证，假事件可以轻易伪造。 cxxjackie 发表于 2022-12-19 22:42
确实可以构造一个假事件传进去，但仅限那些对参数验证不太严谨的事件，有些可能不止检查value，甚至包含类 ...
主要是看道哥里面写的获取元素拿不到，明天我再看看 // 触发input元素规则校验和检测的触发(这里我按照道哥的文章，直接写了函数挨个触发)
const triggerInput = (dom) => {
let myFocus = new Event('focus')
let myInput = new Event('input')
let myChange = new Event('change')
let myBlur = new Event('blur')
dom.dispatchEvent(myFocus)
dom.dispatchEvent(myInput)
dom.dispatchEvent(myChange)
dom.dispatchEvent(myBlur)
}
// 但是我们在实际项目中，可能会遇到一种情况，人家是依次的。比如我触发focus以后input才会出现，才可以接下来的操作
// 所以我们还要根据实际情况分析
const triggerInput1 = (dom) => {
let myFocus = new Event('focus')
dom.dispatchEvent(myFocus)
}
页:
[1]