DEV/javascript

jQuery 마우스 이벤트, 키보드 이벤트

석봉 2022. 7. 30. 22:31

javascript는 마우스의 클릭을 감지하거나 키보드의 입력을 감지할 수 있다.

 

마우스 이벤트, 키보드 이벤트 예시를 알아보자.

 

마우스 클릭 이벤트 예시

// #id 또는 .class 등 jquery 선택자를 통해 클릭 이벤트 대상을 지정
$(document).on('click', "#id", function (e) {
	// 클릭 감지 후 진행할 코드
});

 

키보드 이벤트 예시 (엔터키 이벤트 예시)

// #id 선택자에서 keydown이 감지 됐을 때,
$('#id').keydown(function (event) {
	// 해당 키가 13 이면 (엔터키 라면)
	if (event.keyCode == 13) {
		// 엔터키 입력 감지 후 실행할 코드
	}
}

 

change 이벤트 예시

// 선택자로 변경 감지할 대상을 지정
$(document).on("change", "#id", function (event) {
	// 해당 요소에 변경이 감지되는 경우 실행할 코드
});

 

대표적인 이벤트를 알아보았다.

 

그 외 다양한 이벤트가 있으니 찾아 사용하자.

https://developer.mozilla.org/ko/docs/Web/Events

 

이벤트 참조 | MDN

DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가

developer.mozilla.org