JavaScript in WebEvent

js에서는 페이지에서 일어나는 여러 이벤트들을 지정할 수 있다.

대충 적어봐도... 마우스, 키보드, 사용자 인터페이스, 터치, 구조 변화 등!

생동감 있는 페이지를 위해선 어느 하나 빼놓을 수 없다.

---

webevent.html

역시나 js파일은 외부참조! webevent.js라는 파일을 만들었다.

 

webevent.html

html상에 버튼을 하나 만들어줬다.

onclick속성을 통해... 클릭하면 buttonClick이라는 함수가 작동된다. 요놈은 어디에?

 

webevent.js

아항! js 파일에서 이렇게 buttonClick 함수를 만들어줬다.

작동하면 클릭 이라는 경고창을 띄운다.

잘 뜨는구만.

 

webevent.html

이렇게 id를 지정해 불러올 수도 있다!

 

webevent.js

id를 통해 객체를 지정할 테니 getElementById를 사용했다!

요 button은 onclick이벤트를 가지는데...

이 녀석을 클릭했을 때 this.innerHTML = this.innerHTML + '★'이라는 코드를 작동시킨다!

 

이건 무슨 뜻?

이벤트 리스너 내부의 this 키워드는 → 이벤트를 발생한 자기 자신을 의미한다!

이 녀석, 즉 자기 자신을 innerHTML을 통해 변경시켰다! 어떻게 변경시켰냐면... ★이 하나 추가됐다!

즉 이 함수는 onclick 이벤트가 발생할 때마다 해당 문자 옆에 ★이 하나씩 늘어나는 것.

해당 페이지. 정말로 ★이 숑숑 늘어난다!

이걸 html과 css만으로 구현했다고 생각하면... 흐아.

 

이렇게 js에서 이벤트를 발생시키면 누가, 언제, 어디서 등의 정보가 남게 된다.

이를 이용할 수 있도록 하는 것이 바로 event 객체.

webevent.js

event객체를 함수 안에 넣어주면...!

이렇게 event객체가 뜨는 것을 볼 수 있다.

 

마지막으로 href나 form을 사용할 때 기존 html 태그의 성질을 그대로 이용하면 안 되는 상황이 존재한다.

webevent.html

해당 버튼을 누르면 naver로 페이지 이동을 할 테다. 하지만...

webevent.js

이렇게 onclick 이벤트로 false를 반환하면? 눌러도 아무 일이 생기지 않는다. 와우!