이벤트
-
드롭다운 구현에서 blur와 click 이벤트, 그리고 CSS transition의 영향..Web/Error & Fix 2022. 5. 17. 15:00
드롭다운을 구현하는 중에 바깥을 클릭했을 때 드롭다운이 사라지게 하기 위해서(더 나은 UX..! 항상 사용자 입장에서 생각하기!!!) 'blur'라는 이벤트를 추가했다. 이렇게 const selectBox = document.querySelector('.select-box'); const dropbox = document.querySelector('.dropbox'); const dropboxOpt = document.querySelectorAll('li'); const OptText = document.querySelectorAll('.dropbox-opt'); selectBox.addEventListener('click',function (){ dropbox.classList.toggle('on');..
-
[Day 31] JS DOM & 이벤트TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 12. 23:16
DOM 은 HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할을 한다. 이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 '노드(node)'라고 한다. 돔 트리에 접근 document.getElement~ document.querySelelector(All)~ (*querySelector() 는 코드 초단에만 사용하는 것이 좋다. 실행 시 코드 전체에서 요소를 찾아 실행하기 때문에 메모리 효율이 낮고 코드처리 속도가 느리다.. 그래서 함수 안에서 반복적인 사용은 지양된다.) 돔 제어 1. 이벤트 삽입 .addEventListener() 2. 클래스 제어 .classList.[add/remove/toggle/contains] 3.요소 제어 document.creat..
-
노마드코더 JS 챌린지 Assign.4Web 2022. 1. 13. 17:51
과제: 간단한 이벤트로 웹애플리케이션 만들기 Condition 마우스가 title위로 올라가면 텍스트가 변경되어야 합니다. 마우스가 title을 벗어나면 텍스트가 변경되어야 합니다. 브라우저 창의 사이즈가 변하면 title이 바뀌어야 합니다. 마우스를 우 클릭하면 title이 바뀌어야 합니다. title의 색상은 colors 배열에 있는 색을 사용해야 합니다. .css 와 .html 파일은 수정하지 마세요. 모든 함수 핸들러는 superEventHandler내부에 작성해야 합니다. My Issue 1. 조건 7번 하나의 변수 안에 함수 핸들러 객체를 할당하는 방법을 몰랐으나(내가 강의를 대충 들은 탓인건가...;) 노마드코더 슬랙을 통해 해결하였다 :) 예시) 1 2 3 4 const superEvent..