# addEventListener
useEffect와 addEventListener
1\. useEffect의 사용법2\. useEffect와 addEventListener3\. useEffect와 removeEventListenerreact에서 권장하는 useEffect의 사용법은component 내부에서 선언함으로써 state를 사용 가능하게끔 c
자바스크립트(Document Object Model) 이벤트위임 [1-6]
3개의 메뉴중에 하나를 선택했을 때 색깔을 바꿀려고 한다.함수 clickMenuHandler를 만들고 classList.add와 remove를 통해선택됬을때 색깔을 입히고 다른 것을 선택했을 때 색깔이 지워지게 만든다.removeMenu전역변수를 이용해서 처음 눌러서
자바스크립트(Document Object Model) 이벤트 addEventListener [1-5]
버튼을 누르면 h1태그 제목의 색이 바뀌게 하기 위해서각각 button 과 h1 태그의 선택자를 선택해 변수에 넣는다.h1에 스타일을 주는 function을 만든다.addEventListener('click',스타일을 주는 함수)를 이용해서 button을 눌렀을 때 이
airbnb 클론코딩
airbnb를 만든 화면이다. 주된 컨텐츠 우측 상단 login_box 만들기 가운데 각 menubar의 title hover 작동 menubar의 hover 기능 && 클릭시 달력 동작 등 나머지 html 작업(사진 간격 등) 내가 완벽하게 하지 못한 작업
event.cancelable 프로퍼티
cancelable 값을 alert 로 찍어보는 예제이다. 그런데 해당 예제를 실행하는 와중에 이해가 안되는 동작이 존재했다. 우선 처음 실행했을 때 동작은 다음과 같다. 보다시피 alert 창으로 cancelable 프로퍼티의 값이 찍히게 된다. 내가 설정한
특정 영역 이외의 클릭(event) 인식(Listen)
여기서 우상단의 프로파일 이미지를 클릭하면 아래처럼 메뉴박스가 보여지고,여기서 다시, 해당 우상단 프로파일 이미지 이외 영역을 클릭하면 메뉴박스가 사라지도록 하고자 함if(this == 우상단 프로파일 이미지 element)으로 클릭된 element와 그렇지 않은 el
01. JavaScript Drum Kit
이 상태의 초기화면에서, 키보드 입력 값을 받아, 미리 준비된 대응하는 audio 파일을 재생 및 해당 버튼 CSS transform 효과주기윈도우 객체의 keyCode 값을 받아서, play 함수 실행하는 addEventListener 추가play 함수는 (1) 키코
[JS] eventListener submit and click, focus()
입력창과 버튼이 함께 있는 form은 submit 액션을 받을 수 있다submit은 엔터를 치면 버튼이 눌리며 클릭도 가능하다 버튼은 입력창과 분리되어있기때문에 submit 액션을 받을 수 없다오로지 클릭만 가능하기에 click 액션밖
Westagram 2일차 TIL
오늘 드디어 login html, css, javascript를 끝냈다ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ2일 안에 끝낼 수 있는 거였구나....그런데 참 아이러니 하게 이 짧은 2일이라는 시간 동안 너무나 많은 정보가 나의 뇌에 들어왔기에, 블로깅을 안하고 잘수가 없다... 일단
[JavaScript]window.addEventListener 'keypress', 'keydown' 무슨 차이인가요
결론: 기능에 차이는 없는데 전자는 오래된 property라 권장하지 않고, 최근엔 후자를 더 많이 쓴다.
DOM, event - addEventListener를 쓰자
이 경우 직접적으로 HTML상에 함수를 실행하라고 명시하는것인데가독성이 떨어지고 이벤트를 단 하나밖에 지정할 수 없다는 단점이 있음.우선 DOM을 이용해 요소를 get한다. 그리고 그 변수를 이벤트 처리기의 프로퍼티로 사용했다.위에서 "btm." 뒤의 "onclick"