Front-End/DOM4 DOM EventTarget.addEventListener() React를 공부하다보니 점차 DOM 개념을 까먹게 되는 듯 하다. 오늘 DOM을 이용해 Click 이벤트 발생시 특정한 함수에 인자를 전달하도록 코드를 짜려 했는데, 굉장히 고생을 했다 ㅠㅠ 청년치매.. 오늘은 addEventListner를 다시한번 정리해보려 한다. Syntax target.addEventListener(type, listener); type은 "click"등과 같이 이벤트를 리슨할 이벤트 타입을 넣는 파라미터다. 아래 링크에 어떤 타입들이 있는지 잘 정리 되어 있다. https://developer.mozilla.org/en-US/docs/Web/Events listener는 type 파라미터가 발생했을 때 작동할 객체(함수)를 넣는 파라미터다. 아래 예시를 보면 이해에 도움이 된다.. 2021. 11. 5. DOM 이벤트 객체 오늘은 다양한 종류의 이벤트 객체에 대해 공부해보자. onsubmit form이 submit 되었을 때 자바스크립트 실행 onchange select 엘리먼트의 선택옵션이 변경될 떄 자바스크립트 실행 onmouseover 이미지 위로 마우스 포인터가 움직일 때 자바스크립트 실행 onkeyup 키(문자 숫자 등)가 입력 되었을 때 자바스크립트 실행 event.preventDefault Default로 설정된 기능의 실행을 막는다. 예를 들어, 체크박스를 클릭하면 체크박스가 선택되는 것은 기본적인 기능이다. even.preventDefault 메소드는 이런 기본적인 기능이 실행되는 것을 막는다. 2021. 10. 23. DOM 오답노트 DOM이 이렇게 복잡하고 어려운 개념일 줄이야... 만만하게 생각했었는데, 내가 너무 안일하게 접근을 한 모양이다. 아래 좋은 오답들을 정리해 본다. 1) 아이디가 "javascript"이고, 내용이 "awesome"인 a 태그를 생성하기 위한 방법 let aElement = document.createElement('a') aElement.setAttribute('id', 'javascript') aElement.textContent = 'awesome' let aElement = document.createElement('a') aElement.id = 'javascript' aElement.innerHTML = 'awesome' 2) 아래 예제의 button을 클릭하면 안내창에 "코드스테이츠에 오신.. 2021. 10. 22. DOM 개념정리 오늘은 Javascript로 HTML을 동적으로 만드는데 사용하는 DOM에 대해 공부해 보자. DOM와 자바스크립트의 관계 DOM은 과연 무엇일까? DOM은 자바스크립트인 것인가? 답은 Nope! MDN의 정의는 아래와 같다. The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. 간단히 정리하자면 DOM은 자바스크립트로 HTML을 다룰수 있게 하는 API인 셈이다. 쿼리셀렉터 고급활용 기본적으로 DOM에 대해 제일 처음 배우는 것이 바로 .querySe.. 2021. 10. 22. 이전 1 다음
