제이쿼리 -이벤트 등록 메서드

이벤트 등록 메서드

방문자가 취하는 모든 행위를 말한다. 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 코드를 말한다.

이벤트 등록 메서드에는 하나의 이벤트만 등록할 수 있는 단독 이벤트 등록 메서드와 2개 이상의 이벤트를 등록할 수 있는 그룹 이벤트 등록 메서드가 있다.

 

기본형 :<button id=“btn”>버튼</button>

ex) $(“#bnt”).click(function() {

자바스크립 코드;

});

 

이러한 단독 이벤트 등록 메서드는 로딩 이벤트,마으스 이벤트, 포커스이벤트, 키보드 이벤트,기타 이벤트로 나눌 수 있다.

"이벤트 등록 방식"

이벤트를 등록하는 방법에는 단독 이벤트 등록 방식과 그룹 이벤트 등록 방식 두 종류가 있다.

즉,한 가지 동작에 대한 이벤트 등록 방식에는 단독 이벤트 등록 메서드나 그룹 이벤트 등록 메서드를 사용하고, 두가지 이상의 동작에 대한 이벤트 등록 방식에는 그룹 이벤트 등록 메서드를 사용한다.

 

-단독 이벤트 등록 메서드

대상에 한 가지 동작에 대한 이벤트만 등록할 수 있다.

기본형:$(“이벤트 대상 선택”).이벤트 등록 메서드(function(){

자바스크립 코드;

});

 

ex) 사용자가 버튼을 클릭하면 환영 메시지를 경고 창에 나타내는 예제

<button id=“bnt1”>버튼 </button>

$(“bnt1”).click(function(){

alert(“welcome”);

});

 

그룹 이벤트 등록 메서드

대상에 한 가지 동작 이상의 이벤트를 등록할 수 있다.

기본형 : 1.on()메서드 등록 방식

$(“이벤트 대상 선택”).on(“이벤트종류1,2,n”, function(){

자바 코드; });

2.등록방식 두 번째

$(“이벤트 대상 선택”).on({

“이벤트 종류 1 ,2,3,n”:function(){

자바 스크립트 코드;}

});

3.등록 방식 세 번째

$(“이벤트 대상 선택”).on({

“이벤트 종류1”:function() {자바스크립 코드; 1},

“이벤트 종류2”:function() {자바스크립 코드; 2},

“이벤트 종류3”:function() {자바스크립 코드; n}

});

!! on 메서드를 사용할 때 , click메서드와 달리 function을 먼저 쓰지 않고 on에따른 이벤트 종류를 설정해 준 뒤, 그 종류의 function을 세팅해 준다. 따라서 on 메서드는 function은 이벤트 종류 다음에 온다.

-강제로 이벤트 발생시키기

이것은 “사용자에 의해” 이벤트가 강제로 발생한 것이 아니라,“핸들러”에 의해 자동으로 이벤트가 발행했음을 의미합니다.

 

단독 이벤트 등록 메서드와 trigger() 메서드를 사용한 강제적 발생 예

기본형 : 1.$(“이벤트 대상”).단독 이벤트 등록 메서드();

2.$(“이벤트 대상”).trigger(“이벤트 종류”);

 

 -이벤트 제거 메서드

이벤트를 제거하는 메서드로 off()가 있습니다.

기본형:$(“이벤트 대상”).off(“제거할 이벤트 종류”);

 

-로딩 이벤트 메서드

사용자가 브라우저에서 HTML 문서를 요청하여 HTML 문서의 로딩이 완료되면 이벤트 핸들러를 실행합니다. 로딩 이벤트 메서드에는 ready()와 load() 가 있습니다.

 

-ready() /load() 메서드

ready() ->사용자가 사이트를 방문할 때 요청한 HTML문서 객체의 로딩이 끝나면 이벤트 발생

load() ->외부에 연동된 소스(iframe,img,video)의 로딩이 끝나면 이벤트 발생

기본형 : 1.$(document).ready(function(){자바스큽코드;});

2.$(document).on(“ready”,function(){자브스큽코드;});

3.$(window).load(function() {자바스큽코드;});

4.$(window).on(“load”,function {자바스큽코드;});

 

 마우스 이벤트

마우스 이벤트는 사용자가 사이트에서 마우스를 이용해서 취하는 모든 행위를 말합니다. ex)마우스 포인터를 올리거나 클릭하는 행위등

 

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

click->선택한 요소를 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 강제로 클릭 이벤트를 발생시킬 때 사용

 

기본형 : 1.click 이벤트 등록

$(“이벤트 대상 선택”).click(function() {자바스크립코드;});

$(“이벤트 대상 선택”).on(“click”,function() {자사크릅코드;});

 

2.click 이벤트 강제 발생

$(“이벤트 대상 선택”).click();

 

 dblclick() -> 이벤트 메서드는 선택한 요소를 두 번 클릭 했을 때 OR 선택한 요소에 강제로 더블클릭 이벤트 발생시킵니다.

  

기본형 :     1.dblclick 이벤트 등록

                 $(“이벤트 대상 선택”).dblclick(function() { 자바스큽코드;});

     $(“이벤트 대상 선택”).on(“dblclick”,function() { 자바스큽코드;});

     

2.dblclick 이벤트 강제 발생

$(“이벤트 대상 선택”).dbclick();

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

<a>요소에 click이나 dblclick을 등록하면 클릭할 때 마다 <a>에 링크된 주소로 이동하는 문제가 발생한다.

이 문제를 해결하려면 <a>요소의 기본 이벤트를 차단해야 한다.

<form>요소의 제출 버튼(submit)도 action에 등록된 주소로 이동시키는 문제가 발생한다. 우리가 등록한 이벤트를 정상적으로 수행하려면 이러한 기본 이벤트를 차단해야 한다.

 

기본형 : 1.return false를 이용한 차단 방식

            $(“a또는 form”).이벤트 메서드(function() {

자바스큽 코드;

});

2.preventDefault() 메서드를 이용한 차단 방식

$(“a또는 form”).이벤트 메서드 (function(e) {

e.preventDefault();

자바스큽 코드;

});