[javascript]리스너

이부분은 꼭 알고 꼭 숙지해야하는 부분입니다 

리스너 즉 이벤트 리스너 라고 불리는 녀석입니다 

항상 리스닝 하고있는 상태이기때문에 리스너 라고 부릅니다 예를들어 

우리가 버튼을 클릭하거나 윈도우객체가 로드 되는 시점에 어떠한 동작을 하게 한다던가 

이러한 방식이 바로 윈도우 리스너 입니다 

 

가장 간단한 리스너 하나를 예로 봅시다 

window객체가 로드될때 실행되는 리스너는 다들 아시리라 생각합니다 

window.onload = function () {
	console.log("윈도우 객체가 로드되었어요");
}JAVASCRIPT

이와 같이 사용하기도 하고 

다른 방법은 html에 직접 삽입하는것입니다 

하지만 추천하는 방법은 아닙니다 

기본적으로 html과 js와 css와 백앤드 언어는 분리되어야 유지보수가 편하고 복잡하지 않습니다 

 

간단한 예로 어떨때는 jsp파일에 온클릭 이벤트리스너가 있는데 어떨때는 js파일에 온클릭 이벤트 

리스너가 있다면 혼동되기 쉽고 시스템의 프로세스를 따라가기 어려운 상황도 있을것입니다 

그래서 body에 onload를 사용하지 말고 위와 같이 사용하도록 합시다 

 

그리고 자주쓰이는 리스너들은 간단하게 리스트로 보여드리겠습니다

onchange   = 내용이 변경될때 (셀렉트 박스나 체크박스에 많이 쓰임 )
onblur     = 포커스를 잃었을때 (ex.input 태그에 커서가 있다가 다른곳으로 이동할때 )
onfocus    = 포커스를 얻었을때
ondbclick  = 더블클릭
onkeydown  = 키를 눌렀을때 ( 눌렀을 때와 눌렀다가 땟을 때는 다릅니다)
onkeyup    = 키를 눌렀다가 땠을 때
onkeypress = 키를 누르고 있을때 
onsubmit   = 폼을 전송할때 (입력받은 데이터를 폼으로 전송할때 입력받은 데이터 유효성검증에 사용)JAVASCRIPT

 

이정도가 있습니다 

실제론 더 많은 이벤트가 있지만 다른 부분은 한번 검색 해보시길 바랍니다 

 

이벤트를 생성하는 방법은 addEventListener가 있습니다 이 방식이 간편한것은 

등록 삭제가 편하기 때문에 이 방식을 사용하는것이고 예를 들어서 이벤트를 작성해보겠습니다

 

function testEvent(){
	alert("testEvent 이벤트 호출됨");	
}

document.getElementById('eveStart').addEventListener('click', testEvent);JAVASCRIPT

이렇게 이벤트리스터를 등록할 수 있습니다 

$("h1").click(function () {
  $("h1").css("color", "red");
});JAVASCRIPT

처럼 jQuery 를 이용해서 할 수도있지만 

요즘 추세는 javascript로만 작성하는게 좋다고 하니 과감하게 순수 javascript만 이용하겠습니다