이벤트 등록 메서드

- 이벤트 등록 메서드란?

<button id="btn">버튼<button> //이벤트 적용대상

$("#btn").click(function(){
    자바스크립트 코드;
});

→ #btn에 이벤트 대상, .click에 이벤트 종류, function함수에 처리할 이벤트 코드를 적으면 된다.

 

 

- 이벤트 등록 방식 

• 그룹 이벤트 등록 메서드

1. on() 메서드 등록 방식1
$("이벤트 대상 선택").on("이벤트 종류1 이벤트 종류2 ... 이벤트 종류n",
function() {
    자바스크립트 코드;
});

2. on() 메서드 등록 방식2
$("이벤트 대상 선택").on({
    "이벤트 종류1 이벤트 종류2 ... 이벤트 종류n":function() {
        자바스크립트 코드;
    }
});

3. on() 메서드 등록 방식3
$("이벤트 대상 선택").on({
    "이벤트 종류1":function() {자바스크립트 코드;1},
    "이벤트 종류2":function() {자바스크립트 코드;2},
        ...
    "이벤트 종류n":function() {자바스크립트 코드;n},
});

 

• 강제 이벤트 발생

$("이벤트 대상").단독 이벤트 등록 메서드();
$("이벤트 대상").trigger("이벤트 종류");

 

강제이벤트 예제

<script>
$(function(){
    $(".btn1").click(function(){
        $(".btn1").parent().next()
        .css({"color":"#f00"});
    });
    
    $(".btn2").on({
        "mouseover focus":function(){
            $(".btn2").parent().next()
            .css({"color":"#0f0"});
        }
    });
    
    $(".btn1").click();
    $(".btn2").trigger("mouseover");
});
</script>

→ 버튼1은 click 이벤트가 실행되고, 버튼 2는 마우스 포인터를 올리면 이벤트가 실행되는 코드인데, 

$(".btn2").trigger("mouseover"); 코드로 인해 강제 이벤트가 실행되어 웹페이지에 자동으로 실행하게 된다.

 

• 이벤트 제거 메서드

$("이벤트 대상").off("제거할 이벤트 종류");

$(".btn1").off("click"); //버튼1의 클릭 이벤트 제거
$(".btn2").off("mouseover focus"); //버튼2의 마우스오버, 포커스 이벤트 제거

 

 

- 마우스 이벤트 

• click() 이벤트 메서드

1. click 이벤트 등록
$("이벤트 대상 선택").click(function() { 자바스크립트 코드; });
$("이벤트 대상 선택").on("click", function() { 자바스크립트 코드; });

2. click 이벤트 강제 발생
$("이벤트 대상 선택").click();

 

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

1. mouseover 이벤트 등록
$("이벤트 대상 선택").mouseover(function() { 자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseover", function() { 자바스크립트 코드; });

2. mouseover 이벤트 강제 발생
$("이벤트 대상 선택").mouseover();

→ 마우스커서가 선택 요소 및 자식 요소에 들어가면 이벤트를 발생시킨다.

 

1. mouseout 이벤트 등록
$("이벤트 대상 선택").mouseout(function() { 자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseout", function() { 자바스크립트 코드; });

2. mouseout 이벤트 강제 발생
$("이벤트 대상 선택").mouseout();

→ 마우스 커서가 벗어날 때 이벤트를 발생시킨다.

 

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

→ 마우스 커서가 올라왔을 때와 떠났을 때 이벤트를 발생시킨다. 

 

• mouseenter() / mouseleave() 이벤트 등록 메서드

1. mouseenter 이벤트 등록
$("이벤트 대상 선택").mouseenter(function() { 자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseenter", function() { 자바스크립트 코드; });

2. mouseenter 이벤트 강제 발생
$("이벤트 대상 선택").mouseenter();

→ 해당 요소 위로 마우스가 진입할 때 발생하는 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 마우스 진입 이벤트를 발생시킨다.

 

1. mouseleave 이벤트 등록
$("이벤트 대상 선택").mouseleveae(function() { 자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseleave", function() { 자바스크립트 코드; });

2. mouseleave 이벤트 강제 발생
$("이벤트 대상 선택").mouseleave();

→ 해당 요소에서 마우스가 빠져나갈 때 발생하는 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 마우스가 빠져나가는 이벤트를 발생시킨다.

 

• mousemove() 이벤트 메서드

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

2. mousemove 이벤트 발생
$("이벤트 대상 선택").mousemove();

→ 마우스 포인터를 움직이면 이벤트가 발생하여 마우스 포인터의 위치가 화면에 출력된다.

 

 

 

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

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

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

→ return false; 를 이용하여 이벤트를 차단시키거나, 매개변수 e를 받아 preventDefault()메서드를 사용하여 이벤트를 차단시킬 수 있다.