[JS] DOM & EVENT #5 이벤트 핸들러(Event Handler)

1. 이벤트 핸들러 종류

이벤트 : 마우스나 키보드를 누를때 일어나는 일들, input창에 포커스가 되거나, 문서에 로드가 완료되면 이벤트 발생

핸들러 : 이벤트를 특정한 함수로 실행할 수 있는데 이것을 핸들러라고 함

<button onCick="alert("click")">클릭</button>
<button onCick="sayHello()">클릭2</button>
<button id="btn">클릭3</button>
<button id="btn2">클릭4</button>

<script>
	function sayHello(){
    	alert("Hello");
    }
    const el = document.getElmentById("btn");
    el.onClick=sayHello; /*() 은 넣지 않는다. 반환값이 없기 때문이다*/
    
    const el = document.getElmentById("btn2");
    
    /*addEventListener가 자주 사용되고 권장됨*/
    el2.addEventListener("click", sayHello);
    /* 이렇게 작성해도 됨 el2.addEventListener("click", ()=>{alert('hi');});*/
    
    /*문서가 다 로드되었을 때 실행되는 이벤트*/
    doucument.addEventListener("DOMContentLoaded", ()=>{
    	document.body.style.backgroundColor="red");});
        
    /*이미 할당된 이벤트리스너를 삭제할 때 사용*/
    doucument.removeEventListener("DOMContentLoaded", ()=>{
    	document.body.style.backgroundColor="red");});
</script>

 

2. 자주 쓰는 이벤트 

/*더블 클릭시 이벤트 반응*/
el.addEventListener("dbClick", sayHello);

/*키보드 누를 때 이벤트 발생*/
el.addEventListener("keyup", event => {
	console.log(event); /*event가 콘솔창에 뜨는데 이때, 어떤 키를 눌렀는지도 확인 가능함*/
    })
    
/* focus : input창에 포커스가 될 때 발생*/

input.addEventListener("focus", () => {
	input.style.backgroundColor = "rgba(255,0,0,0.2)";
});

/* blur : 포커스를 잃을 때 발생*/
input.addEventListener("focus", () => {
	input.style.backgroundColor = null;
});

/*mouseMove : 마우스가 움직일 때마다 발생하는 이벤트*/
box.addEventListener("mousemove", event => {
	circle.styles.top = `${event.clientY}px`;
	circle.styles.left = `${event.clientX}px`;
}); /*마우스가 움직이는 위치로 원이 이동함*/    


/*window의 resize : 창 크기가 바뀔 때마다 너비와 높이 값이 변화함*/
window.addEventListenr("resize", () => {
	document.body.innerText = `현재 창 크기는 ${window.innerWidth} X ${window.innerHeight}`;)});

 

 

출처 : 코딩앙마