<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 제거</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
alert("Hello world");
});
$("#btnoff").click(function(){
$("#btn").off("click");
});
$("#btn1").one("click", function(){
alert("환영합니다.");
});
$("#alink").on("click", function(event){
alert("환영합니다.");
event.preventDefault();
});
});
</script>
</head>
<body>
<button id="btn">확인</button>
<button id="btnoff">이벤트 제거</button>
<button id="btnOne">이벤트 한 번 실행</button>
<a href="https://www.daum.net" id="alink">다음 사이트로 이동</a>
</body>
</html>이벤트는 사라지지않고 계속 실행할 수 있다.
하지만 한 번만 실행하고 사라지게 할 수 있는
.off(); 함수가 존재한다.
그리고 이중으로 이벤트를 넣었을 때 하나만 실행되게 하는 것은
.preventDefault(); 를 이용하여
<a> 태그에서 링크로 넘어가는 것만 실행될 수 있게 할 수 있다.
728x90
반응형
'HTML > Javascript 기초' 카테고리의 다른 글
| [Javascript] 이벤트 방해하기 (0) | 2020.08.05 |
|---|---|
| [Javascript] 이벤트 제한하기 (0) | 2020.08.05 |
| [Javascript] 이벤트 단계 (0) | 2020.08.05 |
| [Javascript] 이벤트 흐름 (0) | 2020.08.05 |
| [Javascript] 메뉴 페이지 만들기 실습 (feat. Javascript, jQuery) (0) | 2020.08.05 |
