자바스크립트 기초 개념 - 이벤트 #03

버튼만들기

<input type="button" value="안녕!">

경고창 만들기

'javascript alert' 검색

<input type="button" value="안녕!" onclick="alert('바보!')">

onclick이라는 property는 onclick이라는 속성에는 반드시 JS가 와야한다고 적혀있다. onclick의 속성값은 웹 브라우저가 기억하고 있다가 onclick이 위치하는 태그에 사용자가 클릭했을 때, 기억했던 자바스크립트 코드를 자바스크립트의 문법에 따라서 웹브라우저가 동작할 것입니다라고 적혀있다.

웹브라우저는 어떤 일이 일어나기를 기다리고 있다가 실제로 일어났을 때 준비된 행동을 한다. 이렇게 웹 브라우저 위에서 일어나는 '사건'을 '이벤트'라고 한다. 이러한 이벤트가 일어났을 때 준비된 내용을 실행하도록 하는 속성 중 하나가 onclick인 것이다.

 

우리가 무한히 많은 이벤트들을 만들 수 있다.

<input type="text" onchange="alert('changed')">

빈 텍스트창이 생긴다.

해당 텍스트를 입력하고 커서를 떼면

 

바꼈다고 뜬다.

 

하지만

이렇게 입력했다가 다시 지우고 커서를 떼

경고창이 뜨지 않는다.

 

이렇게 웹 브라우저는 웹 브라우저 위에서 일어나는 10~20까지의 이벤트들을 정의해놓고 있다. 우리는 그 이벤트를 이용해서 사용자와 상호작용하는 웹페이지를 만들 수 있다.

 

만약 사용자가 어떤 키를 눌렀을 때, 이벤트가 발생하게 하고 싶을 때.

'javascript keydown event attribute' 검색

<input type="text" onkeydown="alert('key down!')">

어떤 key를 눌러도 다음과 같은 alert가 나온다.

우리가 지금까지 사용한 속성은 event이다.