DOM#2 이벤트 객체

• 이벤트 객체는 사용자 입력 (onclick, onkeyup, onscroll 등)을 트리거로발생한 이벤트 정보를 담은 객체

사용자가 버튼을 누르면 버튼의 textContent(또는 innerHTML)을 이용해 메뉴의 이름을 가져올 수 있다.

HTML 내부에서

 

textContent의 값을 가져올 수 있는 것

 

이 HTML내부의 tect contet를 가져오기 위해 넣어야 하는 요소를 너무 단순하게 생각했었다. 하지만, 위의 요소에서 우리가 가져와야할 정보는 HTML의 button 태그에 있는 textcontent를 가져와야 하는데, 그러기 위해선 단순히 빈칸을 채우는 것이 아닌, 함수 자체를 수정해야 하는 것이었다.

 

위처럼 코드를 작성해야 버튼을 눌렀을 때, 내가 원하는 값(Americano, Cafelatte)이 나오게 되었다.

이것을 정확하게 분석하려면 순서대로 나의 개념을 정리해야했다.

먼저 이 함수를 테스트 해야했다. 이 것을 개발자 창에서 테스트를 하니

 

아래 이미지가 나왔는데, 이것을 분석하자면

PointerEvent는 마우스로 무엇인가 액션을 취했을 경우를 말하는 것이고 그에 따라 제공될 수 있는 정보들이다. 이 PointerEvent를 클릭하면,

위의 이미지처럼 보이는데, 이것들은 객체로 생각하면 된다. 이 여러가지의 key들 중 나는 HTML에서 소스를 불러오는 key값인 target을 사용한 것이다.

아래 이미지에서 화살표를 누르면 또 여러 갈래의 key값이 나오는데 그 중에서 textcontent를 입력하여, button의 textcontent를 불러온 것이다.

쉽지 않은 생각의 흐름이었다. 조금 더 논리적으로 생각하는 머리가 필요한 경험이었다.