[포스코x코딩온] 웹 풀스택 과정 2주차 javascript 이벤트리스너 / 요소 관리 / jQuery로 요소 탐색, class 제어

 

마우스 이벤트

 

click - 클릭했을 때
dbclick - 더블클릭했을 때
mouseover - 마우스를 요소 위로 움직였을 때
mouseenter - mouseover과 같은 기능, 버블링이 발생하지 않음
mouseout - 마우스가 요소를 벗어날 때
mousedown -  마우스 버튼을 누르고 있는 상태
mouseup - 마우스 버튼을 떼는 순간

* 마우스 토글시 mouseover, mouseout 이벤트 같이 주면 됨

 

 

 

클래스 이름이 같은 버튼 중 하나만 선택하고 싶을때는 this 사용

* this : 함수가 속해 있던 객체(자기자신)를 참조 (나만 선택됨)

//버튼여러개 있을때 하나만 적용시키기 this

        const btns = document.querySelectorAll('.btns'); //class가 btns인 버튼을 모두 선택
        
        //배경색 바뀌는 함수 만들기
        function bgColor(){
            this.style.backgroundColor='blue' //**this - 자기자신만 선택됨
        }

        for(let btn of btns){ //btn - btns에서 반복되는 각 요소를 차례대로 가리키는 변수
            console.log(btn)
            btn.addEventListener('click',bgColor)
        }

 

 

 

 

키보드 이벤트

keyup - 키를 누르고 있을 때
keydown - 누르고 있던 키를 뗄 때

const keyboard = document.querySelector('#keyboard')
    keyboard.addEventListener('keydown',(e)=>{ //e - 사용자가 키보드 누르면 발생하는 이벤트
       console.log(e.code) //code - 이벤트 안에서 코드값만 가져오자
       if(e.code=="ArrowUp"){ // 사용자가 input에 화살표 위 버튼을 눌렀을 때
       		console.log('up');
       }
})

 

 

 

 

폼 이벤트 : 백엔드로 데이터를 전달할 때 제일 많이 사용

 

form 태그의 action 속성은 데이터가 어디로 갈건지에 대한 경로 (데이터의 목적지 이므로 매우 중요)

input - input의 요소 값이 변경 되었을 때 * input의 디폴트 값은 text
submit - 버튼을 눌러 form을 제출(submit)할 때

<form action="/" id="todo-form">
    <input type="text" name="todo" />
    <button>Add</button>
</form>


 <!-- 위의 폼에서 input 값 제출할곳 -->
<ul class="todos"></ul>

사용자가 입력한 input 값을 ul에 제출하고 싶으면?

 

//변수 만들기
const todoForm = document.querySelector('#todo-form')
const todos = document.querySelector('.todos') //ul태그

//submit 이벤트 만들기
todoForm.addEventListener('submit',(e)=>{ //제출이벤트
     e.preventDefault(); //submit시 새로고침 방지
     const todoInput = document.querySelector('input[name=todo]') //폼태그 안의 input 변수로 만들기
     const todo=todoInput.value //입력한값 todo 변수에 담기

//자식요소로 넣을 태그 생성
     const li =document.createElement('li') //li태그 생성
     li.append(todo) // li의 자식요소에 입력한 값을 넣어주고
     todos.append(li) //ul태그의 자식으로 들어감

})

 

 

 

 

이벤트 리스너 : 이벤트가 발생했을 때 실행 할 함수

 

1. 인라인 방식
2. on~~속성 ex)onclick
3. addEventListener( ) 메서드 방식 * 요즘 가장 많이 사용

 

 

 

 

---

 

 

 

 

요소 관리

 

text 변경하기
innerText - 선택된 요소의 text 변경

HTML 변경하기
innerhtml - 선택된 요소의 html을 변경 *태그와 함께 입력 가능

요소 추가하기
 - 자식
append - 선택된 요소의 자식 요소를 맨 마지막에 추가
appendChild - 선택된 요소에 자식 요소를 여러개 추가
prepend - 선택된 요소의 자식 요소를 맨 앞에 추가

 - 형제
before - 선택된 요소의 형제요소로 바로 이전에 추가
after - 선택된 요소의 형제요소로 바로 뒤에 추가

자식 요소 삭제하기
remove - 선택된 요소의 DOM을 삭제
empty - 선택된 요소의 자식 요소를 모두 삭제

요소를 추가하기 위해서는

먼저 1. 태그를 생성하고

2. 필요시 태그에 속성을 추가하고

3. 원하는 요소에 자식 or 형제로 태그를 추가 한다

 

<div id="parent">
    <div class="hello"></div>
</div>

위의 코드에 class='hello'뒤에 똑같은 div 태그를 추가하고 싶으면?

id='parent'의 태그에 자식요소로 추가해도되고

class='hello'의 태그에 형제요소로 추가해도 된다.

 

const parent = document.querySelector('#parent') //변수에 담기

//1. div 태그 생성
const divs = document.createElement('div')

//2. 만든 div 태그에 class='hello' 속성 넣기 (속성 추가는 원할때만)
 divs.setAttribute('class','hello') 
 
 //3. 만든 태그를 자식요소로 추가
 parent.append(divs)

 

 

 

 

jQuery : 자바스크립트 라이브러리

 

jQuery의 장점

• 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원 가능
• HTML DOM를 손쉽게 조작 가능하며, CSS 스타일도 간단히 적용 가능
• 애니매이션 효과나 대화형 처리를 간단하게 적용
• 같은 동작을 하더라도 더욱 짧게 구현 가능
• 오픈 라이선스를 적용해 누구나 자유롭게 이용 가능

 

 

 

jQuery로 요소 찾기

 

parent - 선택한 요소 기준으로 부모 요소 찾기
parents - 선택한 요소 기준으로 조상 요소 찾기

next - 선택한 요소 기준으로 다음 형제 요소 찾기
prev - 선택한 요소 기준으로 이전 형제 요소 찾기

children - 선택한 요소 기준으로 모든 자식 요소 찾기

 

 

 

 

jQuery로 class 제어

addClass('클래스명') - 클래스 추가
removeClass('클래스명') - 클래스 삭제
hasClass('클래스명') - 클래스 유무 확인 *있으면 true, 없으면 false 
toggleClass('클래스명') - 토글키로 클래스 추가/삭제

-javascript
classList.add('클래스명') - 클래스 추가
classList.remove('클래스명') - 클래스 삭제
classList.contains('클래스명') - 클래스 유무 확인 *있으면 true, 없으면 false 
classList.toggle('클래스명') - 토글키로 클래스 추가/삭제

 

 

 

 

+ 코드짤때 편한 패키지 알려주심

console.log => clg + 탭