Notice
Recent Posts
Recent Comments
Link
SeouliteLab
jQuery .one() 메서드: 이벤트 핸들러 단 한 번만 실행하기 본문
예제 1: 클릭 이벤트 핸들러 단 한 번만 실행하기
<!DOCTYPE html>
<html>
<head>
<title>jQuery .one() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").one("click", function(){
alert("버튼이 클릭되었습니다. 이벤트 핸들러는 단 한 번만 실행됩니다.");
});
});
</script>
</head>
<body>
<button>클릭하세요</button>
</body>
</html>
설명: 이 예제에서는 버튼을 클릭할 때마다 경고 메시지가 한 번만 표시되도록 클릭 이벤트 핸들러를 등록합니다.
예제 2: 여러 이벤트에 대해 각각 단 한 번만 실행하기
<!DOCTYPE html>
<html>
<head>
<title>jQuery .one() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").one({
mouseenter: function(){
$(this).text("마우스가 들어왔습니다. 이벤트 핸들러는 단 한 번만 실행됩니다.");
},
click: function(){
$(this).text("클릭되었습니다. 이벤트 핸들러는 단 한 번만 실행됩니다.");
}
});
});
</script>
</head>
<body>
<button>버튼</button>
</body>
</html>
설명: 이 예제에서는 mouseenter
이벤트와 click
이벤트에 대해 각각 다른 동작을 수행하는 핸들러를 등록하고, 각 이벤트 핸들러가 단 한 번만 실행되도록 설정합니다.
예제 3: 동적으로 생성된 요소에 이벤트 핸들러 단 한 번만 실행하기
<!DOCTYPE html>
<html>
<head>
<title>jQuery .one() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("body").one("click", "button", function(){
alert("버튼이 클릭되었습니다. 이벤트 핸들러는 단 한 번만 실행됩니다.");
});
$("#addButton").click(function(){
$("body").append("<button>새로운 버튼</button>");
});
});
</script>
</head>
<body>
<button>클릭하세요</button>
<button id="addButton">새로운 버튼 추가</button>
</body>
</html>
설명: 이 예제에서는 동적으로 생성된 버튼에도 클릭 이벤트 핸들러를 등록하고, 각 버튼당 이벤트 핸들러가 단 한 번만 실행되도록 설정합니다.
예제 4: 이벤트 핸들러가 한 번만 실행된 후 제거하기
<!DOCTYPE html>
<html>
<head>
<title>jQuery .one() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
function clickHandler() {
alert("이벤트 핸들러가 한 번 실행되었습니다. 이후 제거됩니다.");
$(this).off("click", clickHandler);
}
$("button").one("click", clickHandler);
});
</script>
</head>
<body>
<button>클릭하세요</button>
</body>
</html>
설명: 이 예제에서는 이벤트 핸들러가 한 번 실행된 후 자동으로 제거되는 방법을 보여줍니다.
'프로그래밍' 카테고리의 다른 글
jQuery .select() 메서드: 요소 선택과 관련된 기능 (0) | 2024.04.04 |
---|---|
jQuery .resize() 메서드: 화면 크기 변화 감지하기 (0) | 2024.04.04 |
jQuery .on() 메서드: 이벤트 핸들러 등록을 위한 메서드 (0) | 2024.04.04 |
jQuery .off() 메서드: 이벤트 해제를 위한 메서드 (0) | 2024.04.04 |
jQuery .mouseup() 메서드: 마우스 버튼을 놓을 때 발생하는 이벤트 (0) | 2024.04.04 |