> 웹 프론트엔드 > JS 튜토리얼 > submit() 메소드 개요 및 폼 요소의 onsubmit 이벤트 적용_기본지식

submit() 메소드 개요 및 폼 요소의 onsubmit 이벤트 적용_기본지식

WBOY
풀어 주다: 2016-05-16 17:42:25
원래의
1250명이 탐색했습니다.

양식 요소에는 양식 제출을 모니터링하기 위한 submit 메소드와 onsubmit 이벤트 핸들러가 있습니다. elemForm.submit() 메소드를 사용하여 양식 제출을 트리거할 수 있습니다.
1. name="submit"인 요소가 양식 요소에 나타납니다.
이 경우 elemForm.submit()은 양식 제출을 트리거하지 않습니다. 덮어쓰게 됩니다(formElem.submit은 요소에 대한 참조입니다).
2. elemForm.submit(); 양식의 onsubmit 이벤트를 트리거하지 않습니다.
이유는 없습니다. 표준에 명시되어 있습니다.
이와 다소 유사하지만 onfocus, onblur, focus() 및 Blur() 사이의 관계는 elem.blur() 또는 elem.focus()를 호출하면 onblur 및 onfocus 이벤트가 트리거됩니다.
이는 일부 UI 구성 요소를 디자인할 때 일부 이벤트가 내부적으로 호출될 때 관련 이벤트가 트리거되어야 하는지에 대한 아이디어를 제공합니다. 예를 들어 Dialog 구성 요소에는 onopen 이벤트가 있고 반환된 개체에도 open() 메서드가 있습니다. 이때 open() 메서드가 onopen() 이벤트를 트리거해야 하는지 여부를 고려해야 합니다.
3. 양식을 동적으로 생성할 때 발생하는 문제
자주 사용되는 방법은 양식을 제출하기 전에 호출되며 이를 기반으로 제출 여부가 결정됩니다. 유효성 검사() 함수의 반환 값에 대해.

코드 복사 코드는 다음과 같습니다.



그러나 양식에 유효성 검사를 동적으로 추가하려는 경우, 즉 HTML 코드에 onsubmit이 작성되지 않고 페이지가 완료된 후 로드되면 javascript를 사용하여 양식에 핸들러를 추가합니다. 양식의 DOM 노드를 얻어 elemForm 변수에 저장했다고 가정합니다. 일반적으로 다음과 같이 핸들러를 추가합니다:
코드 복사 코드는 다음과 같습니다.

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

문제가 발생합니다. "return false;"는 Firefox 및 Chrome에서 양식 제출을 방지할 수 없습니다. IE에서는) 모든 사람이 "check()"뿐만 아니라 onsubmit 속성에 "return check()"를 쓰는 이유입니다.

이유는 무엇인가요? "Object EventListener: 이것은 ECMAScript 함수 참조입니다. 이 메서드에는 반환 값이 없습니다. 매개 변수는 Event 개체입니다."라고 명시되어 있는 ECMAScript 언어 바인딩을 살펴보십시오. 이는 이벤트 리스너에 반환 값이 없음을 의미합니다. 다르게 말하면, addEventListener는 여러 개의 청취 함수를 요소에 바인딩할 수 있습니다. 특정 이벤트 청취 함수의 반환 값은 전체 이벤트의 반환 값으로 사용될 수 없습니다. 다음 방법을 사용하여 문제를 해결할 수 있습니다
코드 복사 코드는 다음과 같습니다.

function check(ev) {
ev = ev || window.event; // 이벤트 객체
if (ev.preventDefault) { // 표준 브라우저
e.preventDefault() } else { // IE browser Device
window.event.returnValue = false;
}
}

사실 모든 것의 근본 원인은 IE가 DOM 레벨을 지원하지 않기 때문입니다. 2.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿