jQuery

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

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

 

mouseup() 예제 - 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>

 

결과보기

 

mouseup() 정의

 

mouseup 이벤트는 마우스 왼쪽 버튼이 선택 요소 위에서 풀릴 때 (= 위로 올라갈 때) 이벤트 발생.

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

① mouseup 이벤트 촉발.

② mouseup 이벤트 발생 시 실행할 함수 부착.

 


 

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

 

 

mouseup() 구문

 

mouseup 이벤트 촉발.

$(selector).mouseup()

 

mouseup 이벤트에 함수 부착.

$(selector).mouseup(function)

 


[매개변수]

 

function

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

 

 

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

 

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

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

결과보기



분류 제목
Event JQ - error() 메서드 - JQ 1.8 폐기예고. JQ 3.0 폐기완료. / 에러 이벤트 촉발 + 에…
Event JQ - event.currentTarget 속성 - 현재 이벤트 요소 반환. (= 이벤트.커런트타겟 속성)
Event JQ - event.data 속성 - 이벤트 메서드에 전달된 값을 반환. (=이벤트.데이터 속성) ※ 데이터…
Event JQ - event.delegateTarget 속성 ★ - 현재 호출된 이벤트 핸들러가 부착된 요소 반환. …
Event JQ - event.isDefaultPrevented() 메서드 - event.preventDefault()…
Event JQ - event.isImmediatePropagationStopped() 메서드 - event.stopI…
Event JQ - event.isPropagationStopped() 메서드 - event.stopPropagatio…
Event JQ - event.namespace 속성 ★★ - 이벤트 네임스페이스 반환.
Event JQ - event.pageX 속성 - 문서 왼쪽 기준해, 마우스커서 수평 위치 반환. (= 이벤트.페이지엑…
Event JQ - event.pageY 속성 - 문서 상단 기준해, 마우스커서 수직 위치 반환. (= 이벤트.페이지와…
Event JQ - event.preventDefault() 메서드 ★★★★★ - 이벤트 발생 시, 요소의 기본동작 …
Event JQ - event.relatedTarget 속성 - 마우스 이동 시, 막 이탈한 관련 요소 반환. (= …
Event JQ - event.result 속성 - 이벤트의 미자막 반환값 반환. (= 이벤트.리절트 속성)
Event JQ - event.stopImmediatePropagation() 메서드 ★★★ - 다른 이벤트 실행 차단…
Event JQ - event.stopPropagation() 메서드 ★★★ - 이벤트 확산(= 버블링)을 방지. (=…
2/4
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티
웹유틸
회원센터
홈짱닷컴 PC버전 로그인