콘텐츠
jQuery 도 addEventListener 와 같이 DOM 요소의 이벤트 바인딩과 핸들링을 할 수 있다.
이를 위한 .click(), .change(), .on() 등 메서드가 존재하며 순수 JS 대비 좀 더 간결한 코드로 작성 된다는 장점이 있다.
.on() 메서드 – 기본 jQuery 이벤트 바인딩 ⭐
가장 일반적인 이벤트 바인딩 방법은 .on() 메서드를 사용하는 것이다. 기본적인 구성은 다음과 같다.
$(선택자).on(이벤트명, 콜백함수); //콜백함수: 이벤트가 발생했을 때 실행될 함수이벤트는 순수 JavaScript 와 같은 내용으로 사용이 가능하다.
- click: 사용자가 요소를 클릭할 때 발생한다.
- change: 입력 필드의 값이 변경됐을 때 발생한다(예: 텍스트 입력, 선택 상자 변경).
- mouseover: 마우스 포인터가 요소 위로 이동했을 때 발생한다.
- mouseout: 마우스 포인터가 요소에서 벗어났을 때 발생한다.
- mousedown: 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 발생한다.
- mouseup: 사용자가 요소 위에서 마우스 버튼을 놓았을 때 발생한다.
- mousemove: 마우스가 움직일 때 발생한다.
- keydown: 키보드의 키를 눌렀을 때 발생한다.
- keyup: 키보드의 키에서 손을 뗐을 때 발생한다.
- keypress: 키를 누르고 있을 때 발생한다(주로 문자, 숫자 키에 사용).
- focus: 요소가 포커스를 받았을 때 발생한다.
- blur: 요소가 포커스를 잃었을 때 발생한다.
- submit: 폼 제출이 시도될 때 발생한다.
- load: 이미지, 스크립트, 문서 등이 완전히 로드 되었을 때 발생한다.
- resize: 브라우저 창의 크기가 변경됐을 때 발생한다.
- scroll: 스크롤이 발생할 때 마다 발생한다.
이를 활용한 예제 코드는 다음과 같다.
$(선택자).on('click', function() {
alert('버튼이 클릭되었습니다!');
});
$(선택자).on('mouseover', function() {
console.log('마우스가 요소 위에 있습니다!');
});
.on 메소드 사용 장점
장점은 다음과 같다.
- 간결성: jQuery의 선택자는 매우 강력하고, 코드를 간결하게 작성할 수 있게 해준다.
- 호환성: jQuery는 다양한 브라우저에서의 호환성 문제를 내부적으로 처리해준다.
- 체이닝: jQuery 메서드는 체이닝(한 객체에 여러가지 메소드를 줄줄이 사용할 수 있는 것)을 지원하여, 여러 작업을 한 줄의 코드로 처리할 수 있다.
- 동적 요소 처리: .on() 메서드는 동적으로 생성된 요소에 대해서도 이벤트를 바인딩할 수 있게 해준다.
이 중에서 내가 가장 큰 장점이라 보는 것은 동적으로 생성된 요소 에 대한 부분 이다.
이 이야기는 예를 들어 HTML 문서 내의 요소가 아닌, 페이지가 불러와 진 후 JS, jQuery 등을 통해 요소가 새롭게 추가 되었을 때, 해당 요소들에도 이벤트가 바인딩 된다.
체이닝
체이닝은 jQuery 에서 메서드를 온점(.) 을 통해 계속 이어서 작성하는 기법이다. 이를 지원해 다음과 같은 코드를 사용할 수 있다.
$(선택자).on('click', function() {
alert('버튼이 클릭되었습니다!');
}).on('mouseover', function() {
console.log('마우스가 요소 위에 있습니다!');
});.click() 메서드
클릭 이벤트에 대한 핸들러만 지원하는 메서드다.
해당 메서드는 .on() 과 달리 동적으로 추가된 웹 요소에 바로 적용되지 않는 차이점이 있다.
$(선택자).click(function() {
// 동작할 코드
});.change() 메서드
요소의 값이 변경 되었을 때 적용 될 핸들러 추가 한다.
해당 메서드는 .on() 과 달리 동적으로 추가된 웹 요소에 바로 적용되지 않는 차이점이 있다.
$(선택자).change(function() {
// 동작할 코드
});.hover() 메서드
마우스가 위에 올라오고 나갈 때의 핸들러를 추가 한다.
해당 메서드는 .on() 과 달리 동적으로 추가된 웹 요소에 바로 적용되지 않는 차이점이 있다.
$(선택자).hover(
function() {
// 마우스가 올라갈 때 실행될 코드
},
function() { // 마우스 아웃
// 마우스가 밖으로 나갈 때 실행될 코드
}
);
