如何以编程方式/隐式方式拦截从 Javascript 发送到 Googlesheet 的数据？

Question

我正在制作一个map 画家程序，它从用户输入中获取 X、Y 和颜色数据并将其存储在Google 电子表格中。

按照此解决方案，数据以表格形式发送到电子表格。 如果用户正在填写“表单”并点击“提交”按钮，则此解决方案有效。 我有以下EventListener来监听和拦截：

form.addEventListener("submit", function(e) {
      
    e.preventDefault();
   

    const newData = new FormData(form);
    const mapData = e.target.action

    console.log('+++++++++INTERCEPTING++++++++++')
       

  fetch(mapData, {
    method: 'POST',
    body: newData,
    
  })
  

LoadMap()

})

但是，当用户只是在绘画时，我想要一种无需用户点击提交即可将 X、Y 和颜色数据发送到电子表格的方法。 为此，我有以下function ：

 function paint() {

            var paintColour = document.getElementById("paintFill").value
           

            gridCTX.fillStyle = paintColour;
                 
            //PAINTS THE SQUARE
            console.log('')
            console.log('+++++++++PAINTING DATA++++++++++')
            console.log('Painting ' + gridCTX.fillStyle  + ' at ' + rx + ',' + ry)
            gridCTX.fillRect(rx * tileSize, ry * tileSize, tileSize, tileSize)
            paintArray.push({x:rx, y: ry, z: rz, fill: paintColour})
            console.table(paintArray)

           
            //AUTOMATICALLY FILL EDITOR AS PAINTING
            
            
            document.getElementById('testFill').value = paintColour
                
            //AUTOMAGICALLY SUBMIT FORM DATA
            document.forms['mapData'].submit();
            
              
            //NEED TO PREVENT DEFAULT
                      

          }

当调用paint()和document.forms['mapData'].submit()时，我知道EventListener不会在“提交”时触发，因此指的是单击按钮而不是以编程方式提交的表单。

所以，我不确定如何继续我的计划。 我有一些想法......除了“提交”之外还有其他事件可以处理程序化表单提交吗？ 或者也许有一种方法可以将EventListener function(e)中包含的fetch等放入paint() function。

我想避免将用户重定向到此屏幕：

我意识到 Post 和 Get 不是“安全的”，但数据不敏感。 我是 Javascript 的初学者，因此非常感谢解决此问题的任何帮助。

这与这个问题不同，后者询问如何收听在表单上单击的提交按钮。 我想根据document.forms['mapData'].submit()行“倾听”或采取行动。

Answer 1

document.forms['mapData'].dispatchEvent(new Event('submit'));

我从这个问题中得到了答案。