onclick속성과 addEventListener속성

UI를 만드는 기본적인 법칙은

1. html css 로 미리 UI디자인을 해놓기

2. UI를 평소엔 안보이게 숨겨놓기 (display: none 또는 visibility: hidden을 많이 준다)

3. 버튼을 누르거나 어떤 행동을 하면 UI를 보여준다

이런 식으로 만든다. 

onclick은 버튼을 누를 때 어떤 어떤 행동을 하게끔 도와주는 속성이다.

<button onclick="">누르면 뭐가 바뀜</button>

이런 식으로 사용하며 onclick="" 안에는 javascript을 이용해서 코드를 작성한다.

<button onclick="document.getElementById('어쩌구').style.display = 'block';">누르면 뭐가 바뀜</button>

이렇게 onclick함수 내부에 작성할 수 있다. display를 block으로 바꾸면서 원래 none이여서 안보이던 UI가 버튼을 누르면 보이게 되는 원리이다.

 

자바스크립트로 개발해서 HTML에 onclick으로 심어넣기는 옛날 방식이라고 한다. 그래서 요즘은 이벤트리스너를 사용한다. html을 건들지 않고 사용할 수 있어서 깔끔하다고 한다.

예를 들면,

document.getElementById('어쩌구').addEventListener('click', function(){
    //실행할 코드 
});

이런 식으로, 셀렉터를 찾아서 셀렉터에 바로 어떤 행위를 어떤 상황에 할건지 정해주는 함수이다. 'click'의 위치에는 여러가지 이벤트가 올 수 있다.

마우스를 올리면 실행하는 mouseover

스크롤되면 실행하는 scroll (찾는 요소에 스크롤바가 있어야 함)

키보드로 글자를 입력하면 실행하는 keydown (input같이 글을 입력하는 태그에 사용)

이렇게 여러가지 이벤트가 있으니 필요시 찾아서 사용하면 될 것 같다.

https://developer.mozilla.org/en-US/docs/Web/Events 모든 브라우저의 이벤트 리스너이다.