[JQUERY] EVENT

 

이벤트 : 페이지에서 어떤 일이 일어 났을 때 코드를 실행하는 매커니즘

- 이벤트가 일어났을 때 실행되는 코드가 함수인데, 이를 사용하면 jQuery를 더 효율적으로 만들고 코드 재활용 가능

 

 

bind : 이벤트 묶기

- 이벤트 리스너는 자바스크립트 해석기에 어떤 함수를 넘겨줘야 할지 알게 됨

- .bind( ) 메소드 사용

1. 단축 메소드

-  DOM 요소가 이미 존재 할 때만 사용 가능

$("#myElement").click(function() {
    alert($(this).text());
}

 

2. DOM 요소를 새로 만들었을 때처럼, 페이지를 불러온 뒤에 추가된 요소에도 이벤트 리스너 등록 가능

$("#myElement").bind("click", function() {
    alert($(this).text());
});

 

trigger : 이벤트 일으키기

- 다양한 요소들이 존재함 (대략 30가지 정도)

- 이벤트 전부 찾기 : https://api.jquery.com/category/events/

Events | jQuery API Documentation

unbind : 이벤트 제거

- .unbind( ) 메소드 사용

- 폼 전송 버튼을 두 번 누르지 못하게 한다거나, 페이지에서 어떤 일을 단 한번만 할 수 있도록 제한할 때 사용

- 하나의 이벤트 제거

$("#myElement").bind("click", function() {
    alert($(this).text());
});

$("#myElement").unbind('click'); //이벤트 

 

- 모든 이벤트 제거

$("#myElement").bind('focus', function() {
    alert("Focus!");
});

$("#myElement").click(function() {
    alert("Click!");
});

$("#myElement").unbind(); //이벤트 제거

 

---

 

요소 그룹을 하나씩 처리

- 루프 반복 : 대상 그룹에 속한 요소를 하나씩 처리

- .each( ) 메소드 사용

$(".nav_item").each(function() {
    $(this).hide();
});

-> 위와 같을 때, ".nav_item"에 해당하는 요소에서 $(this).hide( ) 코드 실행