submit eventListener和submit method的区别

这个问题曾经让我头痛了一段时间,今天看到greasemonkey的文档,把这个问题说的很清楚,而且给了解决方法,留在这里做个备份

Example: Do something before a form is submitted
function newsubmit(event) {
    var target = event ? event.target : this;
    // do anything you like here
    alert('Submitting form to ' + target.action);
    // call real submit function
    this._submit();
}
// capture the onsubmit event on all forms
window.addEventListener('submit', newsubmit, true);
// If a script calls someForm.submit(), the onsubmit event does not fire,
// so we need to redefine the submit method of the HTMLFormElement class.
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = newsubmit;
There are two things going on here. First, I am adding an event listener that traps submit events. A submit event
occurs when the user clicks a Submit button on a form. However, if another script manually calls the submit()
method of a form, the submit event does not fire. So, the second thing I do is override the submit method of the
HTMLFormElement class.
But wait, there's more. Both the event listener and the method override point to the same function, newsubmit. If
newsubmit gets called via a submit event, the event argument will be populated with an event object that
contains information about the event (for example, event.target will be the form being submitted). However, if a
script manually calls the submit method, the event argument will be missing, but the global variable this will
point to the form. Therefore, in my newsubmit function, I test whether event is null, and if so, get the target form
from this instead.
Tip:
A submit event fires when a user submits a form in the usual way, i.e. by clicking the form's Submit
button or hittingENTER within a form. However, the submit event does not fire when the form is
submitted via a script calling aForm.submit(). Therefore you need to do two things to capture a
form submission: add an event listener to capture to submit event, and modify the prototype of the
HTMLFormElement class to redirect the submit() method to your custom function.

你可能感兴趣的:(prototype)