Overview of submit() method and onsubmit event application of form elements_Basic knowledge

The form element has a submit method and an onsubmit event handler for monitoring form submission. Form submission can be triggered using the elemForm.submit(); method.
1. An element with name="submit" appears in the form element
In this case elemForm.submit(); will not trigger form submission because the original submit method of the form will will be overwritten (formElem.submit is a reference to the element).
2. elemForm.submit(); will not trigger the onsubmit event of the form
No reason, it is stipulated in the standard.
Somewhat similar to this, the relationship between onfocus, onblur, focus(), and blur() is different. Calling elem.blur() or elem.focus() will trigger onblur and onfocus events.
These provide us with an idea. When designing some UI components, we need to consider whether related events should be triggered when some events are called internally. For example, the Dialog component has an onopen event, and the returned object will also have an open() method. At this time, we must consider whether the open() method needs to trigger the onopen() event.
3. Problems encountered when creating forms dynamically
A frequently used method is as follows. It will be called before the form is submitted, and it will be decided whether it needs to be submitted based on the return value of the validate() function. form.

Copy code The code is as follows:

However, if you want to dynamically add validation to a form, that is, there is no onsubmit written in the HTML code, and after the page is loaded, use javascript to add a handler to the form. Here comes the problem. Assume that we have obtained the DOM node of the form and saved it in the variable elemForm. Generally, we add a handler to it like this:

Copy code The code is as follows:

var check = function() {
if ('OK') {
return true;
} else {
return false;
}
};
if (elemForm.addEventListener) {
elemForm.addEventListener("submit", check, false);
} else if (elemForm.attachEvent) {
elemForm. attachEvent("onsubmit", check);
}

The problem arises: "return false;" cannot prevent form submission in Firefox and Chrome (it can in IE) , which is why everyone writes "return check()" in the onsubmit attribute, not just "check()".

What is the reason? Please look at the ECMAScript Language Binding, which clearly states, "Object EventListener: This is an ECMAScript function reference. This method has no return value. The parameter is a Event object", which means that the event listener has no return value. To put it another way, addEventListener can bind multiple listening functions to elements. The return value of a certain event listening function cannot be used as the return value of the entire event. You can use the following method to solve the problem

Copy code The code is as follows:

function check(ev) {
ev = ev || window.event; // Event object
if (ev.preventDefault) { // Standard browser
e.preventDefault();
} else { // IE browser Device
window.event.returnValue = false;
}
}

In fact, the root of everything is because IE does not support DOM Level 2.