• 회원가입
  • 로그인
  • 구글아이디로 로그인

[attribute] HTML - onmousedown 속성 - 마우스버튼 내려갈 때 실행 (= onmousedown속성 = 온마우스다운속성) ※ onmousedown이벤트 = 온마우스다운이벤트 ※마우스버튼 누를 때 실행

목차
  1. onmousedown 예제 - 마우스버튼 내려갈 때 실행
  2. onmousedown 정의
  3. onmousedown 구문

 

onmousedown 예제 - 마우스버튼 내려갈 때 실행

 

<h1 id="hz" onmousedown="mouseDown()" onmouseup="mouseUp()">홈짱닷컴 Homzzang.com</h1>


<script>

function mouseDown() {

  document.getElementById("hz").style.color = "red";

}

function mouseUp() {

  document.getElementById("hz").style.color = "blue";

}

</script>

 

결과보기

 

onmousedown 정의

 

마우스버튼 내려갈 때 실행할 코드 지정.

 


 

1. onmousedown 속성 사용 가능 태그 종류

모든 가시 HTML 요소

 

2-1. (왼쪽/가운데) 마우스버튼 관련 이벤트 발생 순서

  1. onmousedown
  2. onmouseup
  3. onclick

 

2-2. (오른쪽) 마우스버튼 관련 이벤트 발생 순서

  1. onmousedown
  2. onmouseup
  3. oncontextmenu

 

3.

모든 브라우저 지원.

 

 

onmousedown 구문

 

HTML 방식

  • <element onmousedown="myScript">

 

JS 방식 (3가지)

  • object.onmousedown = ()=>{myScript};
  • object.onmousedown = function(){myScript};
  • object.addEventListener("mousedown", myScript);



[속성값]

 

myScript

마우스버튼 내려갈 때, 실행할 JS 코드

  • 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
  • 사용 방식 통일 권장.

 

 


분류 제목
form HTML - <input type="tel"> 태그 - 전화번호 입력 (= 인풋텔타입/텔타입인풋/텔인풋 요소…
form HTML - <input type="text"> 태그 - 1줄 텍스트 입력 (= 인풋텍스트타입/텍스트타입인풋…
form HTML - <input type="time"> 태그 - 시간 입력 (= 인풋타임타입/타임타입인풋/타임인풋 …
form HTML - <input type="url"> 태그 - http(s) 프로토콜 형식의 URL 주소 입력 (=…
form HTML - <input type="week"> 태그 - 연도와 몇주차인지 선택 입력 (= 인풋위크타입/위크…
attribute HTML - loading 속성 - 이미지 레이지로드 여부 지정 (= loading속성 = 로딩속성) ※ …
attribute HTML - cellspacing 속성 - 테이블셀간의 간격 지정 (= cellspacing속성 = 셀스페이…
attribute HTML - cellpadding 속성 - 테이블 셀 내부의 여백 지정 (= cellpadding속성 = 셀…
18/18
목록
찾아주셔서 감사합니다. Since 2012