>웹 프론트엔드 >JS 튜토리얼 >HTML을 수정하지 않고 JavaScript에서 양식 제출을 어떻게 감지할 수 있습니까?

HTML을 수정하지 않고 JavaScript에서 양식 제출을 어떻게 감지할 수 있습니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-10-28 08:52:30641검색

How Can I Detect Form Submissions in JavaScript Without Modifying HTML?

HTML을 수정하지 않고 양식 제출 감지

onSubmit 또는 onClick과 같은 HTML 이벤트 속성을 사용하지 않고 JavaScript에서 양식 제출을 감지하려면 다음을 활용할 수 있습니다. 양식 요소의 addEventListener 또는 attachmentEvent 메소드.

EventTarget.addEventListener 사용

addEventListener 메소드를 지원하는 최신 브라우저의 경우 구문은 다음과 같습니다.

<code class="javascript">var ele = /*Your Form Element*/;
if(ele.addEventListener){
    ele.addEventListener("submit", callback, false); 
}</code>

EventTarget.attachEvent 사용

addEventListener를 지원하지 않는 이전 버전의 Internet Explorer의 경우 대신에 attachmentEvent를 사용하세요.

<code class="javascript">else if(ele.attachEvent){
    ele.attachEvent('onsubmit', callback);        
}</code>

두 가지 모두에서 경우에 콜백은 양식이 제출될 때 실행하려는 함수입니다.

기본 제출 방지

양식이 기본적으로 제출되는 것을 방지해야 하는 경우 e를 사용하세요. 콜백 함수 내의 .preventDefault():

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

라이브러리 통합

라이브러리 사용을 선호하는 경우 제출 이벤트를 수신하기 위한 몇 가지 인기 있는 옵션은 다음과 같습니다. :

  • jQuery:

    <code class="javascript">$(ele).submit(callback);</code>
  • 기타 라이브러리:
    의 문서를 참조하세요. 특정 구현 세부 사항을 보려면 선택한 라이브러리를 참조하세요.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.