JavaScript/Interactive JavaScript (21) 썸네일형 리스트형 [JavaScript] mouseenter / mouseleave mouseenter : 마우스포인터가 요소 바깥쪽에서 안쪽으로 이동할 때 발생 mouseleave : 마우스포인터가 요소 안쪽에서 바깥쪽으로 이동할 때 발생 mouseenter 와 mouseleave 는 각각 mouseover, mouseout 과 비슷하지만 다른 점이 있다. 1. 버블링이 일어나지 않는다. 자식요소에서는 mouseenter 와 mouseleave 이벤트가 발생하지 않음. 2. 자식요소의 영역을 계산하지 않는다. mouseenter 와 mouseleave는 자식요소의 영역을 계산하지 않는다. 자식요소가 이벤트의 영향을 끼치는지가 가장 큰 차이점이라고 생각할 수 있음. [JavaScript] 이벤트 위임 오늘 할 일 자바스크립트 공부 유튜브 시청 저녁 약속 독서 이벤트를 적용할 때, 아래와 같이 반복문을 사용하여 나타낼 수 있으나, const list = documnet.querySelector('#list'); for(let item of list.children) { item.addEventListener('click', function(e) { e.target.classList.toggle('done') }); } const li = document.createElement('li'); li.classList.add('item'); li.textContent = '일기 쓰기'; list.append(li); '일기쓰기' 를 추가하면 그 추가된 아이템에는 이벤트핸들러가 적용이 되지 않는다. 이벤트 버.. [JavaScript] 이벤트 객체 이벤트 핸들러의 첫번째 파라미터에는 이벤트 객체가 전달된다. event 라고 작성해도 되지만 대게 e 로 작성한다. // 이벤트 객체 (Event Object) const myInput = document.querySelector('#myInput'); const myBtn = document.querySelector('#myBtn'); function printEvent(event) { console.log(event); event.target.style.color = 'red'; } myInput.addEventListener('keydown', printEvent); myBtn.addEventListener('click', printEvent); 위처럼 keydown 이벤트가 발생하면, 이벤트 정보.. [JavaScript] 이벤트 핸들러 등록하기 1. onclick 프로퍼티 활용 새로운 이벤트를 할당하게 되면, 기존의 값을 덮어쓰기 때문에 좋은 방법이라고 하기 어렵다. let btn = document.querySelector('#myBtn'); btn.onclick = function () { console.log('Hi Codeit!'); }; 2. addEventListener 메소드 사용 첫번째 파라미터로 event 내용을 전달하고, 두번째 파라미터로 이벤트 핸들러를 전달한다. 핸들러 부분에는 함수이름 만 전달해주면 됨. event1() 이런식으로 작성하는 경우가 있는데, 그러면 함수가 바로 실행된다. 하나의 요소에 여러가지 독립적인 이벤트를 등록할 수 있음. let btn = document.querySelector('#myBtn'); .. [JavaScript] 노드 삭제와 이동하기 // 노드 삭제와 이동 const today = document.querySelector('#today'); // 요소 노드 선택 const tomorrow = document.querySelector('#tomorrow'); // 노드 삭제하기: Node.remove() tomorrow.remove(); today.children[2].remove(); // today 노드의 자식요소 중에서 2번 인덱스 삭제 // 노드 이동하기: prepend, append, before, after today.append(tomorrow.children[1]); // tomorrow 노드의 자식요소 중 1번 인덱스를 today노드로 이동 tomorrow.children[1].after(today.children[1].. [JavaScript] 요소 노드 추가하기 요소 노드 추가하기 다음과 같은 HTML 태그가 있다고 할 때, 내일 할일을 추가해보려고 한다. 오늘 할 일 밥먹기 잠자기 공부하기 내일 할 일 책보기 게임하기 노래듣기 1. 요소 노드 생성 : document.createElement('태그이름') 원하는 태그 이름으로 요소 노드를 만들 수 있음. const first = document.createElement('li'); 2. 요소 노드 꾸미기 : textContent, innerHTML, ... first.textContent = '처음'; 3. 요소 노드 추가하기 : NODE.prepend, append, after, before tomorrow.prepend(first); method 를 호출한 젤 첫번째 노드로 파라미터로 전달한 값을 추가할 .. [JavaScript] DOM window 객체 window 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체이다. 자바스크립트 코드 어느 곳에서나 항상 접근할 수 있는 객체이기 때문에 전역 객체, 영어로는 Global Object라고 한다. 어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체 내부의 것이기 때문에 앞에 window.을 생략할 수도 있음. DOM (Document Object Model) DOM이란 Document Object Model의 약자로, 한국어로는 문서 객체 모델. 간단하게 표현하면 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것이다. 이때 각 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분된다. [JavaScript] css 선택자로 태그 선택하기 document.quertSelector('css선택자') (1) id 선택하기 id 를 선택할때 #을 사용하므로 '#id' const myTag = document.querySelector('#myNumber'); console.log(myTag); const myTag2 = document.getElementById('myNumber'); console.log(myTag2); 이 코드는 id로 태그를 선택하는 방법과 결과가 같다. (2-1) class 선택하기 (맨 첫번째 값) class 를 선택할 때 .을 사용하므로 '.class' const myTag3 = document.querySelector('.color-btn'); console.log(myTag3); 여러 값이 있어도 가장 처음 값이 선.. 이전 1 2 3 다음
