Overview of the submit () method and onsubmit event application of form elements

The form element has the submit method and the onsubmit event handle, which is used to listen for form submission. You can use elemForm. submit (); To trigger form submission.
1. the name = "submit" element appears in the Form element.
In this case, elemForm. submit (); does not trigger form submission, because the original submit method of the form will be overwritten (formElem. submit is a reference to this element ).
2. elemForm. submit (); does not trigger the onsubmit event of the form.
There is no reason. This is the standard.
Similarly, the relationships between onfocus, onblur, focus (), and blur () are different. elem is called. blur () or elem. focus () triggers the onblur and onfocus events.
These provide us with an idea. When designing some UI components, we need to consider whether some events need to trigger relevant events during internal calls. For example, the Dialog component has an onopen event, and the returned object also has an open () method. In this case, we must consider whether the open () method needs to trigger an onopen () event.
3. Problems Encountered during dynamic form creation
A frequently used method is as follows. It will be called before the form is submit. It determines whether to submit the form based on the return value of the validate () function.
Copy codeThe Code is as follows:
<Form onsubmit = "return validate ();"> </form>

However, if you want to dynamically add verification for a form, that is, the HTML code does not write onsubmit, but after loading the page, you can add a handler to the form using javascript. Suppose we have obtained the DOM node of the form and saved it in the elemForm variable. In this case, add handler to it:
Copy codeThe 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 occurs: In Firefox and Chrome, "return false;" cannot block form submission (in IE ), this is why everyone needs to write "return check ()" in the onsubmit attribute, not just "check ()".

Why? See 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 does not return a value. In other words, addEventListener can bind multiple listening functions to an element. The return value of an event listening function cannot be the return value of the entire event. You can use the following method to solve the problem:
Copy codeThe Code is as follows:
Function check (ev ){
Ev = ev | window. event; // Event object
If (ev. preventDefault) {// standard browser
E. preventDefault ();
} Else {// IE browser
Window. event. returnValue = false;
}
}

In fact, everything is simply because IE does not support DOM Level 2.