Javascript - event listener/ addEventListener

 event listener

 

window.onclick = function(){
	alert('I\'m clicked')'
    };

위의 코드가 대표적인 이벤트리스너 코드이다.

 

• window가 click 될때 function부분이 실행된다 
• window가 click 됐다는것을 browser가알려준다. 
• 이벤트 리스너는 항상 on + '이벤트명' 으로 명명된다.
• 여러가지 태그에 이벤트를 설정할 수 있다 . ( 모든 DOM들 ) 
• 자주쓰이는 이벤트 목록 
  • onblur  (객체가 포커스를 잃었을때)
  • onchange(객체의 내용이 바뀌고 포커스를 잃었을때 )
  • onclick (객체를 클릭했을때 ) 
  • ondbclick ( 객체를 더블클릭 했을때)
  • onerror(에러가 떴을떄)
  • onfocus(객체에 포커스 되었을때 )
  • onkeydown(키를 눌렀을떄 ) 
  • onkeypress(키를 누르고 있을떄 ) 
  • onkeyup( 키를 눌렀다가 뗐을때 ) 
  • onload ( 문서나 객체가 로드되었을때)
  • onmouseover(마우스가 객체위로 올라왔을떄 ) 
  • onmouseout ( 마우스가 객체바깥으로 나갔을떄 ) 
  • onreset ( reset버튼을 눌렀을때 )  
  • onresize ( 객체의 크기가 바뀌었을때 ) 
  • onscroll ( 스크롤바를 조작할때 )
  • onsubmit ( 폼이 전송될때 ) 
  • 등등....

 

 

addEventLIstener

• 이벤트를 붙이는 다른방법 이다 
• on으로 붙이는 것보다 좋은방법
• 여러 이벤트를 등록할 수 있다 
• 특정이벤트를 제거 할 수 있다 ( removeEventListener)

function onClick() {
  alert('I\'m clicked!');
}
function onClick2() {
  alert('또다른 이벤트');
}
document.getElementById('clickMe').addEventListener('click', onClick); // 이벤트 연결
document.getElementById('clickMe').addEventListener('click', onClick2); // 또 하나의 이벤트 연결
document.getElementById('clickMe').removeEventListener('click', onClick); // 연결할 이벤트 중 하나 제거
이렇게 click 위치에는 다른 이벤트에서 on만 떼고 이벤트명을 집어넣으면 됩니다.

 

 

 

 

 

 

 

https://www.zerocho.com/category/JavaScript/post/57432d2aa48729787807c3fc

(JavaScript) 이벤트 리스너와 콜백(event listener, callback)

-제로초 블로그의 내용을 기억하기위해 다시 정리했다 -