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

[Event] JQ - mousedown() 메서드 - mousedown 이벤트발생/함수실행. (= mousedown메서드 = 마우스다운메서드)

목차

  1. mousedown() 예제 - (mouseup/mousedown) 시 태그 추가
  2. mousedown() 정의
  3. mousedown() 구문
  4. mousedown() 예제 - mousedown 이벤트 시, 경고창 띄우기

 

mousedown() 예제 - (mouseup/mousedown) 시 태그 추가

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("div").mouseup(function(){

    $(this).after("<p style='color:red;'>홈페이지 제작관리 강의.</p>");

  });

  $("div").mousedown(function(){

    $(this).after("<p style='color:blue;'>코딩언어 그누보드 강의.</p>");

  });

});

</script>


<div>홈짱닷컴 Homzzang.com</div>

 

결과보기

 

mousedown() 정의

 

mousedown 이벤트는 마우스 왼쪽 버튼이 선택 요소 위에서 아래로 내려갈 때 이벤트 발생.

 


 

1. mousedown() 메서드는 아래 2가지 역할 수행 가능.

  • ① mousedown 이벤트 촉발.
  • ② mousedown 이벤트 발생 시 실행할 함수 부착.

 

 

2. cf.

  • mouseup() 메서드와 주로 함께 사용.

 

 

mousedown() 구문

 

mousedown 이벤트 촉발.

$(selector).mousedown()

 

mousedown 이벤트에 함수 부착.

$(selector).mousedown(function)

 


[매개변수]

 

function

선택. mousedown 이벤트 발생 시 실행할 함수 지정.

 

 

mousedown() 예제 - mousedown 이벤트 시, 경고창 띄우기

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hz").mousedown(function(){
        alert("Homzzang.com"); 
    });
});
</script>

<p id="hz">홈짱닷컴 주소 보기</p>

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Effect JQ - animate() 메서드 ★★★★★ - 움직이게 하기. (= 움직임 실행/설정 = 동적 애니 효과…
Effect JQ - stop() 메서드 ★ - 멈추게 하기 (= 슬라이드/애니 중단 = 움직임 멈추기/멈춤 = stop…
Effect JQ - Callback (콜백함수) ★ - 추가 호출 실행 함수
Effect JQ - Chaining 기법 ★ - 여러 메서드 연쇄 실행. (= 메서드 이어서 실행시키기. = 체이닝)
HTML_CSS JQ - text(), html(), val() , attr() 메서드 - (내용얻기/값얻기/속성얻기) (내… 2
HTML_CSS JQ - append(), prepend(), after(), before() 메서드 - (요소추가 / 내용…
HTML_CSS JQ - remove() / empty() 메서드 - (요소제거 / 내용삭제 / 내용비우기) ※ 리무브, 엠…
HTML_CSS JQ - addClass() , removeClass() , toggleClass() , css() 메서드 …
HTML_CSS JQ - css() 메서드 ★★★ - CSS 설정/반환 (= CSS메서드 = 스타일메서드) ※ 스타일 주기
HTML_CSS JQ - width() , height() , innerWidth() , innerHeight() , out…
Traversing JQ - Traversing - 특정요소찾기 (= 특정요소선택 = 트래버싱)
Traversing JQ - parent() , parents() , parentsUntil() 메서드 - 부모요소찾기 (= 부…
Traversing JQ - children() 메서드 - 자식요소찾기 / find() 메서드 - 자손요소찾기
Traversing JQ - 형제찾기 메서드 - siblings() , next() , nextAll() , nextUntil(…
Traversing JQ - 검색필터링 메서드 - first() , last() , eq() , filter() , not() …
AJAX JQ - AJAX (아작스) 소개 - 정의 / 기본예제 / 메서드종류
AJAX JQ - load() 메서드 ★ - 파일 내용 가져오기 (= load메서드 = 아작스 로드메서드)
AJAX JQ - get()/post() 메서드 - 서버에 정보요청 (= get메서드 = 겟메서드 / post메서드 …
Misc JQ - noConflict() 메서드 ★★★ - javascript (JS) 기반의 다른 프레임워크와의 충…
Examples jQuery Examples - 제이쿼리 예제 복습
2/15
목록
찾아주셔서 감사합니다. Since 2012