본문 바로가기
728x90

프론트엔드 개발 공부한 것을 기록해요

📌Development
22

[JS] DOM & EVENT #6 이벤트 버블링, 이벤트 위임 1. 이벤트 버블링 모든 요소에 클릭 이벤트 발생시 콘솔로그를 찍도록 만들어보자. 아래는 html코드이다. 이런식으로 짰구나만 생각하고 따라오면 된다. 첨부된 css style sheet의 내용은 생략하겠다. ✏️입력 Red ✨결과 li를 클릭해보면 li, ul, div, body순으로 찍힌다. 초록색 네모박스를 클릭하면 자기 자신인 div와 부모요소인 body 모두 console에 남겨진다. ✅알 수 있는 것 자식요소에서 발생한 이벤트는 부모와 그 부모를 통해 전파된다. 하위요소에서 상위요소로 올라가는것. 더 이상 부모요소가 없을 때까지 이 과정은 반복된다. li에서 click 이벤트가 발생하면 부모요소로 전파된다. 이벤트가 거슬러 올라가는 모습이 거품처럼 보인다 해서 이것을 이벤트 버블링(event .. 2023. 3. 27.
[JS] DOM & EVENT #5 이벤트 핸들러(Event Handler) 1. Event Handler 할당하기 클릭 DOM Events HTML DOM Event Object W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com : Event의 속성들이 있다. 어떤 것들이 있는지 살펴보면 좋다. 클릭 클릭2 클릭3 클릭4 위와 같은 코드가 있다고 가정해보자. 클릭, 클릭2, 클릭3, 클릭4를 보면 각자 다른 방식의 button event 코드가 있.. 2023. 3. 27.
[JS] DOM이란? #4 CSS style, class 제어 1. Style제어 HTML BOX Red Green blue 일반적으로는 background-color 라고 적지만 여기에서는 backroundColor라고 명시한다. 만일, 익숙한 방식으로 하고싶다면 대괄호를 써도 된다. ex) box.style["margin-left"] = "30px"; 여러 속성 동시에 적어주는 단축속성도 문자열로 적어주면된다. ex) box.style.border = "10px solid #000" 2. Class제어 //콘솔창 box.className; ' ' box.className = 'bg-red'; 2023. 3. 26.
[JS] DOM이란? #3 노드 생성,추가,복제,삭제 *DOM: 문서 객체 모델(The Document Object Model) 1. 생성하고 추가하는 방법 ul이 있다. document.createElement('li')를 만들어준다. document.createTextNode('pink')도 만들어준다. 그다음 li에 appendChild(pinkText)이용해서 방금 만든 text node를 넣어준다. 그다음에 ul.appendChild(li)넣어주면 마무리된다. * appendChild(): 지정한 부모노드의 가장 마지막 자식으로 추가된다. * insertBefore() : 지정한 부모노드의 그 이전으로 추가된다. //Console const newLi3 = document.createElement('li); undefined cost textNod.. 2023. 3. 26.
728x90

최근댓글

최근글

skin by © 2024 ttutta

티스토리툴바