목차
- ondblclick 예제 - <button> 더블클릭해 지정 요소에 내용 넣기
- ondblclick 정의
- ondblclick 구문
- ondblclick 예제 - <p> 더블클릭해 해당 내용 글자색 변경
- ondblclick 예제 - <button> 더블클릭해 <input> 입력값 복사
ondblclick 예제 - <button> 더블클릭해 지정 요소에 내용 넣기
<button ondblclick="homzzang()">더블클릭</button>
<p id="hz"></p>
<script>
function homzzang() {
document.getElementById("hz").innerHTML = "홈짱닷컴 Homzzang.com";
}
</script>
결과보기
ondblclick 정의
요소 더블클릭 시 실행할 스크립트 지정.
1. ondblclick 속성 사용 가능 태그 종류
모든 보이는 HTML 요소
- 예외: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>
2. cf
onclick 속성 - 클릭 시, 실행할 스크립트 지정.
3.
모든 브라우저 지원.
ondblclick 구문
HTML 방식
- <element ondblclick="myScript">
JS 방식 (3가지)
- object.ondblclick = ()=>{myScript};
- object.ondblclick = function(){myScript};
- object.addEventListener("dblclick", myScript);
[속성값]
myScript
요소 더블클릭 시, 실행할 JS 코드
- 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
- 사용 방식 통일 권장.
ondblclick 예제 - <p> 더블클릭해 해당 내용 글자색 변경
<p id="hz" ondblclick="homzzang()">홈짱닷컴 Homzzang.com</p>
<script>
function homzzang() {
document.getElementById("hz").style.color = "red";
}
</script>
결과보기
ondblclick 예제 - <button> 더블클릭해 <input> 입력값 복사
hz1: <input type="text" id="hz1" value="홈짱닷컴 Homzzang.com"><br>
hz2: <input type="text" id="hz2"><br><br>
<button ondblclick="homzzang()">더블클릭</button>
<script>
function homzzang() {
let hz1 = document.getElementById("hz1");
let hz2 = document.getElementById("hz2");
hz2.value = hz1.value;
}
</script>
결과보기
