목차
- dblclick() 예제 - p요소 더블클릭 시, 경고창 띄우기
- dblclick() 정의
- dblclick() 구문
- dblclick() 예제 - p요소 더블클릭 시 p요소 숨기기
- dblclick() 예제 - div 요소 더블클릭 시 색상 변경
dblclick() 예제 - p요소 더블클릭 시, 경고창 띄우기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
alert("홈페이지 제작관리 강의");
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
결과보기
dblclick() 정의
dblclick 이벤트는 마우스 왼쪽 버튼으로 선택 요소를 더블클릭하면 발생.
※ dblclick() 메서드는 아래 2가지 역할 수행 가능.
① dblclick 이벤트 촉발.
② dblclick 이벤트 발생 시 실행할 함수 부착.
1.
dblclick 이벤트는 click 이벤트도 생성함.
(∴ 두 이벤트가 동일 요소에 적용된 경우, 문제 생김. )
2.
dblclick()에서 dbl은 double 의미.
cf.
① PHP에서 OR 의미하는 || 기호는 (Shift + \)키를 두 번 눌러 입력.
② \ 키는 엔터키 바로 위의 역슬래시 키 의미
③ 그누보드 게시판의 분류명 구분하는 | 기호도 (Shift + \)키를 입력
dblclick() 구문
dblclick 이벤트 촉발.
$(selector).dblclick()
dblclick 이벤트에 함수 부착.
$(selector).dblclick(function)
[매개변수]
function
선택. dblclick 이벤트 발생 시 실행할 함수 지정.
dblclick() 예제 - p요소 더블클릭 시 p요소 숨기기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
<p>더블클릭하면 사라져랴! 얏!!</p>
<p>홈짱닷컴 Homzzang.com</p>
<p>HTML CSS JS SQL PHP</p>
dblclick() 예제 - div 요소 더블클릭 시 색상 변경
<style>
div { background:red; height:100px; width:150px; }
div.hz { background:yellow;color:black; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var box = $("#homzzang");
box.dblclick(function () {
box.toggleClass('hz');
});
});
</script>
<div id='homzzang'></div>
결과 보기
