HTML을 수정하지 않고 JavaScript에서 양식 제출 이벤트를 감지하는 방법은 무엇입니까?

HTML 마크업 없이 양식 제출 이벤트 감지

JavaScript에서 일반적인 작업 중 하나는 양식을 제출하기 전에 유효성을 검사하는 것입니다. 전통적으로 이는 onSubmit 및 onClick과 같은 HTML 속성을 사용하여 달성되었습니다. 그러나 HTML 코드를 변경하지 않고 독립형 유효성 검사 라이브러리를 생성하려면 더 나은 접근 방식이 필요합니다.

해결책은 기본적으로 JavaScript에서 양식의 제출 이벤트를 수신하는 것입니다. 이를 수행하는 방법은 다음과 같습니다.

<code class="javascript">var ele = /*Your Form Element*/;
if (ele.addEventListener) {
    ele.addEventListener("submit", callback, false);  //Modern browsers
} else if (ele.attachEvent) {
    ele.attachEvent('onsubmit', callback);            //Old IE
}</code>

이 코드에서 ele는 양식 요소를 나타내고 콜백은 양식 제출 시 실행하려는 함수입니다.

이벤트 전파

이 코드를 완전히 이해하려면 이벤트 전파를 이해하는 것이 중요합니다. 다음 HTML을 고려해보세요.

<code class="html"><form id="myForm">
    <input type="submit">
</form></code>

제출 버튼을 클릭하면 "제출" 이벤트가 트리거됩니다. 이 이벤트는 버튼에서 시작하여 양식 요소에서 끝나는 DOM 트리를 버블링합니다. 양식 자체(ele.addEventListener('submit'))에서 제출 이벤트를 수신하여 트리 위로 이동하는 이벤트를 캡처합니다.

기본 양식 제출 방지

양식 제출 시 사용자 지정 작업(예: 유효성 검사)을 수행하려면 PreventDefault()를 사용하여 브라우저의 기본 제출 동작을 방지할 수 있습니다.

<code class="javascript">document.querySelector("#myForm").addEventListener("submit", function(e) {
    if (!isValid) {
        e.preventDefault();    //stop form from submitting
    }
});</code>

위 코드에서 isValid가 false인 경우 , 양식 제출이 차단됩니다.

라이브러리 통합

기본 JavaScript를 사용하는 것이 선호되지만 일부 개발자는 라이브러리를 선호합니다. 다음은 인기 있는 라이브러리에서 양식 제출 이벤트를 수신할 수 있는 방법입니다.

• jQuery: $(ele).submit(callback);
• Prototype : ele.observe('submit', callback);
• MooTools: ele.addEvent('submit', callback);

작성자 이벤트 전파를 이해하고 기본 addEventListener 또는 라이브러리 통합을 활용하면 HTML 코드를 수정하지 않고도 JavaScript에서 양식 제출 이벤트를 효과적으로 수신할 수 있습니다.

위 내용은 HTML을 수정하지 않고 JavaScript에서 양식 제출 이벤트를 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!