深入浅出 Greasemonkey

例 4.26. 当表单提交时做点事

function newsubmit(event) {
var target = event ? event.target : this;

// 在这里定义想做的操作
alert('Submitting form to ' + target.action);

// 调用真正的提交函数
this._submit();
}

// 捕获所有表单的 onsubmit 事件
window.addEventListener('submit', newsubmit, true);

// 如果脚本调用 someForm.submit()，onsubmit 事件不会发生，
// 所以我们需要重新定义 HTMLFormElement 类的 submit 方法。
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = newsubmit;

在这里做了两件事。首先，我加入了一个用来捕获 submit 事件的监听函数。当用户点击表单的提交按钮时，触发 submit 事件。然而，当别的脚本调用表单的 submit() 方法时，并不会触发 submit 事件。 所以，我做的第二件事是覆盖 HTMLFormElement 类的 submit 方法。

但是等等，还有几点需要说明。事件监听函数和重新定义的方法都指向同一个函数，newsubmit。如果 newsubmit 被一个 submit 事件调用，event 参数将会被包含在事件对象中，这个事件对象包含事件的信息（例如，event.target 是被提交的表单）。然而，如果脚本手动调用了 submit 方法，event 事件会被忽略掉，但是全局变量 this 将会指向这个表单。因此，在我的 newsubmit 函数中，我先判断 event 是否为空；如果为空，就用 this 来得到这个表单。