웹 페이지 또는 웹 사이트를 업데이트하는 동안 포함된 일부 링크가 더 이상 필요하지 않거나 관련이 없는 상황이 있습니다. 그 외에도 특정 웹사이트의 트래픽을 효과적으로 관리합니다. 이러한 경우 JavaScript에서 이벤트를 취소하면 일부 기능을 비활성화하고 이러한 사례 시나리오를 처리하는 데 놀라운 효과가 있습니다.
JavaScript에서 이벤트를 취소하는 방법은 무엇입니까?
다음 접근 방식을 사용하여 JavaScript에서 이벤트를 취소할 수 있습니다.
-
- ' 방지기본값() ' 방법.
- ' 부울 값 ' 접근하다.
- ' stopPropagation() ' 방법.
방법 1: preventDefault() 메서드를 사용하여 JavaScript에서 이벤트 취소
' 방지기본값() ” 메소드는 첨부된 이벤트가 취소 가능한 경우 취소합니다. 이 방법은 연결된 이벤트를 액세스된 링크에서 분리하여 수행되는 작업을 방지하는 데 사용할 수 있습니다.
통사론
event.preventDefault ( )
주어진 구문에서:
-
- ' 이벤트 '는 분리할 이벤트를 나타냅니다.
예시
아래에 제공된 코드 스니펫을 살펴보세요.
< h3 > 클릭 이벤트가 취소됩니다. ! h3 >
< ㅏ ID = '대지' href = 'https://www.google.com/' > Google 웹사이트 방문 ㅏ >
문서.getElementById ( '대지' ) .addEventListener ( '딸깍 하는 소리' , 기능 ( 취소 ) {
취소.방지기본값 ( ) ;
} ) ;
아래 단계를 따르십시오.
-
- 먼저 DOM(Document Object Model)에 표시할 명시된 표제를 포함합니다.
- 그 후 ' URL '를 사용하여 ' href ' 기인하다.
- 이제 코드의 JavaScript 부분에서 지정된 URL에 액세스합니다.
- 또한 '를 첨부하십시오. 딸깍 하는 소리 '를 사용하는 함수의 도움으로 URL이 포함된 이벤트 추가 이벤트 리스너() ' 방법.
- 마지막으로 ' 방지기본값() ” 메서드는 함수의 매개변수를 사용하여 첨부된 이벤트를 분리하는 데 적용됩니다.
산출
접근 방식 2: 부울 값을 반환하여 JavaScript에서 이벤트 취소
이 접근 방식은 ' 거짓 ' 트리거된 이벤트의 부울 값입니다.
예시
다음 코드 줄은 명시된 개념을 보여줍니다.
< 센터 >< 입력 유형 = '텍스트' 자리 표시자 = '텍스트 입력' 입력에 = '취소 이벤트()' > 센터 >기능 취소 이벤트 ( ) {
반품 거짓 ;
알리다 ( '이 문장은 표시되지 않습니다' )
}
위의 코드 스니펫에서:
-
- 먼저 ' <중앙> ” 태그에 입력 텍스트 필드를 할당합니다.
- 또한 '를 첨부하십시오. 입력에 ' 지정된 이벤트 ' 자리 표시자 ' 값. 이렇게 하면 텍스트를 입력할 때 지정된 함수가 호출됩니다.
- 이제 코드의 JavaScript 부분에서 ' 취소 이벤트() '. 정의에서 부울 값을 반환합니다. 거짓 ' 포함된 취소 ' 이벤트 '.
- 마지막으로 경고 상자에 명시된 메시지를 지정합니다. 반환된 부울 값은 대화 상자가 표시되지 않도록 합니다.
산출
위의 출력에서 함수에 접근하면 경고 대화 상자가 표시되지 않아 첨부된 이벤트가 취소되는 것을 볼 수 있습니다.
접근 방식 3: stopPropagation() 메서드를 사용하여 JavaScript에서 이벤트 취소
' stopPropagation() ” 메소드는 동일한 이벤트가 전파되는 것을 방지합니다. 이 메서드는 확인란을 선택할 때 두 div 사이의 전파를 중지하는 데 사용할 수 있습니다.
통사론
event.stop전파 ( )
예시
다음 코드 줄을 관찰하십시오.
< 센터 >< h3 > 웹사이트를 클릭하여 변경 사항을 관찰하십시오. h3 >< div 클릭 = '요소2()' > 리눅스
< div 클릭 = '요소1(이벤트)' > 웹사이트 div >
div >
< 브 >
전파 중지 확인:
< 입력 유형 = '체크박스' ID = '확인하다' >
센터 >
-
- 마찬가지로 첫 번째 단계에서 명시된 제목을 포함합니다.
- 이제 ' div '가 붙은 ' 태그 클릭 ” 이벤트는 각각 두 가지 다른 함수 element2() 및 element1()을 호출합니다.
- 또한 지정된 ID의 확인란을 포함합니다. 이 확인란을 선택하면 두 div 간의 전파가 중지됩니다.
이제 다음 JavaScript 코드 줄을 살펴보십시오.
기능 요소1 ( 그리고 ) {알리다 ( '웹사이트를 클릭했습니다' ) ;
만약에 ( 문서.getElementById ( '확인하다' ) .체크 ) {
e.stop전파 ( ) ;
}
}
기능 요소2 ( ) {
알리다 ( 'Linuxhint를 클릭했습니다' ) ;
}
위의 js 코드에서:
-
- '라는 함수를 정의하십시오. 요소1() '. 여기서 매개변수 ' 그리고 '는 ' 이벤트 '이 코드의 HTML 부분에 지정되어 실행됩니다.
- 정의에서 명시된 메시지가 있는 경고 대화 상자를 표시합니다.
- 그런 다음 ' getElementById() ' 방법. 또한 ' 체크 ' 체크박스의 상태를 확인하기 위해 속성을 추가합니다.
- 그런 다음 ' stopPropagation() ' 매개변수를 참조하는 방법 ' 그리고 '. 이렇게 하면 한 기능에서 다른 기능으로의 전파가 중지됩니다.
- 마찬가지로 다른 함수를 정의하십시오. 요소2() '를 전파할 예정이다. 이 기능은 전파 전에만 작동합니다.
산출
여기에서 확인란을 선택하고 div를 클릭할 때의 동작을 관찰합니다.
JavaScript에서 이벤트를 취소하는 접근 방식을 컴파일했습니다.
결론
' 방지기본값() ' 방법, ' 부울 값 ' 접근 방식 또는 ' stopPropagation() '메소드를 사용하여 JavaScript에서 이벤트를 취소할 수 있습니다. 첫 번째 방법은 연결된 이벤트를 분리하여 링크를 비활성화하도록 구현할 수 있습니다. 부울 값 접근 방식은 ' 거짓 ' 트리거된 이벤트의 부울 값입니다. stopPropagation() 메서드는 포함된 확인란의 도움으로 두 div 간의 전파를 중지하는 데 적용할 수 있습니다. 이 튜토리얼에서는 JavaScript에서 이벤트를 취소하는 방법을 설명했습니다.