onsearch 이벤트는 웹 페이지에서 검색 기능을 구현할 때 유용하게 활용되는 JavaScript 이벤트입니다. 사용자가 <input> 요소에 검색어를 입력한 후 ENTER 키를 누르거나, 검색창의 “x”(지우기) 버튼을 클릭했을 때 발생합니다.
onsearch 이벤트의 기본 개념
onsearch 이벤트를 사용하려면 해당 입력 요소의 type 속성을 반드시 "search"로 지정해야 합니다. 일반 텍스트 입력창(type="text")에서는 이 이벤트가 동작하지 않으므로 주의가 필요합니다.
다만 브라우저 호환성 측면에서 한 가지 제약이 있습니다. onsearch 이벤트는 Internet Explorer, Firefox, Opera에서는 지원되지 않습니다. Chrome, Safari 등 WebKit 기반 브라우저에서 주로 동작하므로, 크로스 브라우징이 중요한 프로젝트라면 keydown 또는 input 이벤트와 함께 사용하는 것을 권장합니다.
onsearch 이벤트 구현 예제
아래 예제 코드를 실행하면 onsearch 이벤트가 실제로 어떻게 동작하는지 확인할 수 있습니다. 검색창에 원하는 키워드를 입력하고 ENTER 키를 눌러보세요.
<!DOCTYPE html>
<html>
<body>
<p>아래 검색창에 찾고 싶은 내용을 입력한 후 "ENTER" 키를 누르세요.</p>
<input type = "search" id = "newInput" onsearch = "searchFunc()">
<script>
function searchFunc() {
var a = document.getElementById("newInput");
document.write("Searched = " + a.value);
}
</script>
</body>
</html>
코드 설명
위 코드의 핵심 동작 방식은 다음과 같습니다.
<input type="search">: 검색 전용 입력창을 생성합니다. 이 타입에는 ENTER 키 입력과 “x” 버튼 클릭 시 onsearch 이벤트가 트리거됩니다.onsearch="searchFunc()": 검색 이벤트가 발생하면searchFunc()함수가 호출됩니다.document.getElementById(): 입력창 요소에 접근하여 현재 입력된 값을 가져옵니다.a.value: 사용자가 입력한 검색어를 화면에 출력합니다.
addEventListener 방식으로 대체하기
HTML 속성에 직접 이벤트를 작성하는 대신, JavaScript에서 addEventListener 메서드를 사용하면 코드를 더 깔끔하게 관리할 수 있습니다.
document.getElementById("newInput").addEventListener("search", function() {
console.log("검색어: " + this.value);
});
이처럼 onsearch 이벤트를 활용하면 별도의 검색 버튼 없이도 사용자의 검색 동작을 즉시 감지하여 처리할 수 있어, 검색 중심의 웹 애플리케이션 개발에 유용합니다.