[자바스크립트] 이벤트 핸들러 HTML 태그에 흔히 쓰이는 함수의 예

 

웹 페이지에서 동작이 일어나는 것들을 이벤트라고한다 .

웹 페이지에서 이벤트 발생시 웹 페이지에 알려줘야지? 그 이벤트와 이벤트 함수를 연결해주는 것이 이벤트 핸들러다.

이벤트 핸들러는 이벤트 동작에 on을 붙이면된다 예를 들어서 많이 사용하는 onClick, onChange가 대표적인 예이다. 

 

예를 들면 onclick="함수()" 또는 onclick=실행명령에서 onclick은 이벤트(동작)이고 뒤에 함수()또는 실행명령온다 

이벤트와 함수, 실행명령을 연결하는 것이 이벤트 핸들러이다.

 

 

객체에서 이벤트가 발생하는 것을 표현할 때

객체.이벤트로 표현한다.예를 들어서 클릭의 이벤트가 해당 객체에서 발생했을 경우 Obj.onClick = function(){ alert('알람이 울렸습니다'}로 표현할 수 있다.

 

 

보통 button태그에서 많이 쓰이는 onclick의 경우 해당 버튼을 누를 경우 발생할 수 있는 함수를 만들고 

button태그에 onclick="showObj"()로 클릭 이벤트시 함수를 발생시킬 수 있다.

 

const inputType = document.querySelector("#typing")

const inputclick = document.querySelector("#push")

 

const handleTyping = function(){

    console.log("타이핑이 되고 있어요!")

 

const handleClick = function(){

        console.log("클릭되고 있어요!")

 

        inputType.onkeydown= handleTyping

        inputclick.onclick= handleClick

    }

}

 

 

예를 들어서 해석해보면

inputclick요소가 클릭되면 handleclick이라는 이벤트핸들러함수가 동작할 것이다 .