이벤트리스너 사용방법
- 적용시킬 HTML 속성을 가져온다.
- 적용시킬 이벤트함수를 만든다
- 가져온 HTML 속성을 담은 변수에 어떤 이벤트를 했을 때, 함수를 실행할 지 정한다.
<body>
<button>클릭</button>
</body>const button = document.querySelector("button");
function handler (e) {
console.log("클릭되었습니다");
}
button.addEventListener("click", handler);주의
처음 HTML요소 중 style프로퍼티의 경우 HTML 요소에 인라인 스타일로 직접 설정된 속성만을 반환합니다.
초기 설정이 ""로 세팅이 되어있다는 점을 기억합시다.
아래 코드 기준으로 생각했을 때
js에서 handler함수를 실행해도 바로 css가 적용되는게 아닙니다.
초기에는 JavaScript 코드에서 직접 스타일을 설정했지만, 첫 번째 클릭 이후에는 스타일이 변경되고 이 변경은 인라인 스타일이 아니기 때문에 container.style.display는 "none"이 아닌 ""을 반환합니다.
See the Pen Untitled by Chaeyoung (@Chaeyoung-the-animator) on CodePen.
위 코드에서 css에서 display:none 일 경우 if문이 실행되게 해두었는데, 막상 처음 click 버튼을 누르면 handle함수에서 if문 코드블럭이 실행되는게 아니라 else문 코드블럭이 실행되는 것을 알 수 있습니다. 그 이유는 위에 언급했듯이 처음 HTML 요소에 인라인 스타일로 직접 설정된 속성만을 반환하기 때문에 처음에는 console로 container.style을 확인했을 때 display:""임을 확인할 수 있습니다.
따라서 바로 click을 눌렀을때 .container의 스타일 조건을 명시해주는게 중요합니다. if문으로 들어가게하려면 if문 조건에 초기값을 OR연산자를 지정해주거나 HTML 에서 인라인 스타일을 적용하면 해결됩니다.
function handler() {
if (container.style.display === "none" || container.style.display === "") {
container.style.display = "flex";
openButton.style.display = "none";
} else {
container.style.display = "none";
openButton.style.display = "block";
}
}어떤 방법을 사용할지는 상황에 맞춰 적용하도록 합시다.
'JavaScript. > Vanila JS' 카테고리의 다른 글
| JavaScript Math.trunc()메서드와 틸트(tilt) 연산자 (0) | 2024.08.23 |
|---|---|
| 한글 입력시 두번 이벤트 발생되는 현상 - onKeyPress, onKeyDown, onKeyup (1) | 2024.03.17 |
| 구조분해할당 (0) | 2024.02.28 |
