油猴指令碼筆記：如何獲取React框架開發的頁面元素。對元素使用.click()沒有反應怎麼辦？如何一步步的執行操作。

頁面元素使用.click()沒有反應怎麼辦？

如果是React開發的頁面大機率是因為沒有設定事件監聽器。

先來看看有沒有繫結事件監聽器：
F12 -> CTRL+SHIFT+C 審查元素 -> Event Listeners選項卡

1. 有繫結事件監聽器的元素：
   
2. 沒有繫結事件監聽器的元素：
   

沒有繫結事件監聽器的元素的解決辦法：

const ele = document.querySelector("#nameZh");
const prop = Object.keys(zh).find(p => p.startsWith('__reactEventHandlers'));
console.log(ele[prop]);

上面最關鍵的程式碼是第二行變數prop的獲取，利用遍歷鍵值，獲取react元素繫結的方法。

然後觸發這些事件。

 let mousedown = new Event("mousedown" ,{ "bubbles": true, "cancel" : true, "composed": true});
 let keyup = new Event('keyup' ,{ "bubbles": true, "cancel" : true, "composed": true});
 var click = new Event('click' ,{ "bubbles": true, "cancel" : true, "composed": true});
 let ele = document.querySelector("selector")

 ele.dispatchEvent(mousedown)
 ele.dispatchEvent(keyup)
 ele.dispatchEvent(click)

如何一步步的執行程式碼，不使用非同步操作？

把函式都封裝返回成Promise

例子：
```
  // 填充指定input框
  // @param {string} selector
  // @param {string} content
  const fillInput = (selector, content) => {
    return new Promise(resolve => {
      setTimeout(() => {
        var mousedown = new Event("mousedown", { "bubbles": true, "cancel": true, "composed": true });
        var keyup = new Event('keyup', { "bubbles": true, "cancel": true, "composed": true });

        let ele = document.querySelector(selector)

        ele.focus();
        document.execCommand("inserttext", false, content)

        ele.dispatchEvent(mousedown);
        ele.dispatchEvent(keyup);

        // console.log(selector)
        resolve();
      }, 300);
    })
  }

  呼叫：
  fillInput(zhTitSelector, zh_title)
    .then(() => fillInput(zhContSelector, zh_content))
    .then(() => fillInput(enTitSelector, en_title))
    .then(() => fillInput(enContSelector, en_content))
```

改變了input值，但是無法透過校驗，點選儲存值會清空

有2個可能的方案，

1. 事件監聽按順序執行，例如：

   focus聚焦 -> input輸入內容 -> change內容改變 -> blur取消聚焦

   如果事件監聽器有這些，按上面的方法一個個觸發，

2. 呼叫document.execCommand("inserttext", false, "username") API,
   這個api可以模擬人的操作，但是已從相關的 web 標準中移除，2023年2月20日對我專案有用

我參考的文章

• 油猴指令碼開發指南
• 透過js指令碼改變input元素的value值時無法觸發change事件的解決方案