[jQuery] 마우스 이벤트

선영·2022년 9월 16일

jQuery

목록 보기

3/4

`click()/dblclick()` 이벤트 메서드

click() 이벤트 메서드 는 선택한 요소를 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 강제로 클릭 이벤트를 발생시킬 때 사용

① click 이벤트 등록
$("이벤트 대상 선택").click(function() { 자바스크립트 코드; });
$("이벤트 대상 선택").on("click", function() { 자바스크립트 코드; });
② click 이벤트 강제 발생
$("이벤트 대상 선택").click();
dblclick() 이벤트 메서드 는 선택한 요소를 연속해서 두 번 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 강제로 더블클릭 이벤트를 발생시킴.

① dblclick 이벤트 등록
$("이벤트 대상 선택").dblclick(function() { 자바스크립트 코드; });
$("이벤트 대상 선택").on("dblclick", function() { 자바스크립트 코드; });
② dblclick 이벤트 강제 발생
$("이벤트 대상 선택").dblclick();

`<a>,<form>` 태그에 클릭 이벤트 적용 시 기본 이벤트 차단하기

① return false 를 이용한 차단 방식
$("a 또는 form").이벤트메서드(function() { 자바스크립트 코드; return false; });
② preventDefault() 메서드 를 이용한 차단 방식
$("a 또는 form").이벤트메서드(function(e) { e.preventDefault(); 자바스크립트 코드; });

...생략...
<script>
    $(function(){
        $(".btn1").on("click", function(e){
            e.preventDefault();
            $(".txt1").css({"background-color": "#ff0"});
        });
        $(".btn2").on("click", function(){
            $(".txt2").css({"background-color": "#0ff"});
        });
        $(".btn3").on("dblclick", function(){
            $(".txt3").css({"background-color": "#0f0"});
        });
    });
</script>  
...
<body>
    <p>
        <a href="https://www.google.com/" class="btn1">버튼 1</a>
    </p>
    <p class="txt1">내용 1</p>

    <p>
        <a href="https://www.google.com/" class="btn2">버튼 2</a>
    </p>
    <p class="txt2">내용 2</p>

    <p><button class="btn3">버튼 3</button></p>
    <p class="txt3">내용 3</p>
</body>

`mouseover()/mouseout()/hover()` 이벤트 메서드

mouseover() 이벤트 메서드 는 선택한 요소에 마우스 포인터를 올릴 때마다 이벤트를 발생시키거나 선택한 요소에 이벤트를 강제로 발생시킴.

① mouseover 이벤트 등록
$("이벤트 대상 선택").mouseover(function() { 자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseover", function() { 자바스크립트 코드; });
② mouseover 이벤트 강제 발생
$("이벤트 대상 선택").mouseover();
mouseout() 이벤트 메서드 는 선택한 요소에서 마우스 포인터가 벗어날 때마다 이벤트를 발생시키거나 선택한 요소에 이벤트를 강제로 발생시킴.

① mouseout 이벤트 등록
$("마우스 이벤트 선택").mouseout(function() { 자바스크립트 코드; });
$("마우스 이벤트 선택").on("mouseout", function() { 자바스크립트 코드; });
② mouseout 이벤트 강제 발생
$("이벤트 대상 선택").mouseout();
hover() 이벤트 메서드 는 선택한 요소에 마우스 포인터가 올라갈 때와 선택한 요소에서 벗어날 때 각각 이벤트를 발생시키며, 이때 각각 다른 이벤트 핸들러를 실행시킴.

① hover 이벤트 등록
$("이벤트 대상 선택").hover(function() { 마우스 오버시 실행될 코드 }, function() { 마우스 아웃 시 실행될 코드 });

...생략...
$(function(){
    $(".btn1").on({
        "mouseover" : function() {
            $(".txt1").css({"background-color" : "yellow"});
         }, 
         "mouseout" : function() {
            $(".txt1").css({"background" : "none"});
         }
    });
    $(".btn2").hover(function(){ 
        $(".txt2").css({"background-color" : "aqua"});
    }, function(){
        $(".txt2").css({"background" : "none"});
    });
});
...
<body>
    <p>
        <button class="btn1">Mouse Over/ Mouse Out</button>
    </p>
    <p class="txt1">내용1</p>
    <p>
        <button class="btn2">Hover</button>
    </p>
    <p class="txt2">내용2</p>
</body>

`mouseenter()/mouseleave()` 이벤트 메서드

mouseenter() 이벤트 메서드 는 대상 요소의 경계 범위에 마우스 포인터가 들어오면 이벤트를 발생시킴.

① mouseenter 이벤트 등록
$("이벤트 대상 선택").mouseenter(function() { 자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseenter", funtion() { 자바스크립트 코드; });
② mouseenter 이벤트 강제 발생
$("이벤트 대상 선택").mouseenter();
mouseleave() 이벤트 메서드 는 대상 요소의 경계 범위에서 마우스 포인터가 완전히 벗어나면 이벤트를 발생시킴.

① mouseleave 이벤트 등록
$("이벤트 대상 선택").mouseleave(function() { 자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseleave", funtion() { 자바스크립트 코드; });
② mouseleave 이벤트 강제 발생
$("이벤트 대상 선택").mouseleave();

...생략...
$(function(){
    $("#box_1").on("mouseenter", function(){
        $("#box_1").css({"background-color" : "yellow"});
    });
    $("#box_2").on("mouseleave", function(){
        $("#box_2").css({"background-color": "pink"});
    });
});
...
<body>
    <h1>mouseout</h1>
    <div id="box_1">
        <p><a href="#">내용1</a></p>
        <p><a href="#">내용2</a></p>
        <p><a href="#">내용3</a></p>
    </div>

    <h1>mouseleave</h1>
    <div id="box_2">
        <p><a href="#">내용4</a></p>
        <p><a href="#">내용5</a></p>
        <p><a href="#">내용6</a></p>
    </div>
</body>

`mousemove()` 이벤트 메서드

이벤트가 발생하면 이벤트 핸들러의 매개변수에 이벤트 객체가 생성됨. 생성된 이벤트 객체에는 이벤트 성격에 맞는 다양한 속성이 있음.

① mousemove 이벤트 등록
$("이벤트 대상 선택").mousemove(function() { 자바스크립트 코드; });
$("이벤트 대상 선택").on("mousemove", funtion() { 자바스크립트 코드; });
② mousemove 이벤트 발생
$("이벤트 대상 선택").mousemove();

...생략...
$(function(){
    $(document).on("mousemove", function(e){
        $(".posX").text(e.pageX);
        $(".posY").text(e.pageY);
    });
});
...
<body>
    <h1>mousemove</h1>
    <p>X : <span class="posX">0</span>px</p>
    <p>Y : <span class="posY">0</span>px</p>
</body>