DOM-3

0. classses and attribute

////classes and attribute
const firstli = document.querySelector('li:first-child');
const link = firstli.children[0];   //엑스자표시

let val;       

//classes
val = link.className;
val = link.classList;
val = link.classList[0];
link.classList.add('test');
link.classList.remove('test');
val = link;

//attribute
val = link.getAttribute('href');
val = link.setAttribute('href', 'http://google.com');        //첫번째 엑스자 누르면 하이퍼링크로 연결된다

link.setAttribute('title', 'google');
val = link.hasAttribute('href');    //불리언
link.removeAttribute('title');
val = link;

console.log(val);

---

1. event listners & the event object

- 이벤트 소요시간
.timeStamp; 

- 전체윈도우창 기준에서 이벤트가 일어나는 픽셀의 위치를 출력
.clientX;
.clientY; 

- 해당 element 에서 이벤트가 일어나는 픽셀의 위치를 출력
.offsetX;
.offsetY;

document.querySelector('.clear-tasks').addEventListener('click', onclick);

function onclick(e){
  // console.log('clicked');

  let val;
  val = e;

  //event target element
  val=e.target;
  val = e.target.id;
  val = e.target.className;
  val = e.target.classList;

  e.target.innerText = 'hello';

  //event type
  val = e.type;

  // Timestamp
  val = e.timeStamp;

  //coords event relative to the window   클릭하는 픽셀의 세로/가로위치 *전체 윈도우창 기준
  val = e.clientY;
  val = e.clientX; 

   //coords event relative to the element  *클릭하는 요소에서 픽셀의 위치 
   val = e.offsetY;
   val = e.offsetX; 

  console.log(val);
}

---

2. Mouse event

const clearbtn = document.querySelector('.clear-tasks');
const card = document.querySelector('.card');
const heading = document.querySelector('h5');


//click
clearbtn.addEventListener('click',runEvent);

//double click
clearbtn.addEventListener('dblclick',runEvent);

//mouse down  : 클릭 '누른'상태
clearbtn.addEventListener('mousedown',runEvent);

//mouse up  : 클릭 '누르고 뗀'상태
clearbtn.addEventListener('mouseup',runEvent);

//mouse enter : 마우스 '닿으면' 실행됨
card.addEventListener('mouseenter',runEvent);

//mouse leave
card.addEventListener('mouseleave',runEvent);

//mouseover
card.addEventListener('mouseover',runEvent);

//mouseout
card.addEventListener('mouseout',runEvent);

//mouse move
card.addEventListener('mousemove',runEvent);

//event handler
function runEvent(e){
  console.log(`EVENT TYPE: ${e.type}`);
  heading.textContent = `MouseX: ${e.offsetX} MouseY: ${e.offsetY}`;
  document.body.style.backgroundColor = `rgb(${e.offsetX},${e.offsetY},40)`;
}

---

3. keyboard & input events

- input

const form = document.querySelector('form');
const taskInput = document.getElementById('task');

//clear input
taskInput.value = '';

form.addEventListener('submit', runEvent);

function runEvent(e){
  console.log(`EVENT TYPE: ${e.type}`);

  //get input value
  console.log(taskInput.value);
  e.preventDefault();
}

- keydown, keyup, keypress

const form = document.querySelector('form');
const taskInput = document.getElementById('task');
const heading = document.querySelector('h5');

//key down
taskInput.addEventListener('keydown',runEvent);

function runEvent(e){
  console.log(`EVENT TYPE: ${e.type}`);
  console.log(e.target.value);           // input으로 입력되고있는 값이 똑같이 h5에 나옴
}

- focus, blur

const taskInput = document.getElementById('task');

//focus
taskInput.addEventListener('focus',runEvent);

//blur
taskInput.addEventListener('blur',runEvent);

- cut, paste

//cut   : ctrl+z 했을때
taskInput.addEventListener('cut',runEvent);

//paste   : ctrl+v 했을때
taskInput.addEventListener('paste',runEvent);

---

4. Event Bubbling & Event Delegation

- event bubbling 

//EVENT BUBBLING  : bubbles up the dom

document.querySelector('.card-title').addEventListener('click', function(){
  console.log('card title');
});

document.querySelector('.card-content').addEventListener('click', function(){
  console.log('card content');
});

document.querySelector('.card').addEventListener('click', function(){
  console.log('card');
});

document.querySelector('.col').addEventListener('click', function(){
  console.log('col');
});

- event delegation

//EVENT DELEGATION

const delItem = document.querySelector('.delete-item');

delItem.addEventListener('click', deleteItem);

function deleteItem(){
  console.log('delete item');
}


#1
document.body.addEventListener('click', deleteItem);
function deleteItem(e){
  if(e.target.className === 'fa fa-remove'){
  console.log('delete item');
  }   
}


#2
document.body.addEventListener('click', deleteItem);
function deleteItem(e){
  if(e.target.parentElement.className === 'delete-item secondary-content'){
  console.log('delete item');
  }   
}

#3
document.body.addEventListener('click', deleteItem);
function deleteItem(e){
  if(e.target.parentElement.classList.contains('delete-item')){
  console.log('delete item');
  }   
}

- 실제로 삭제되는 효과적용하기

document.body.addEventListener('click', deleteItem);
function deleteItem(e){
  if(e.target.parentElement.classList.contains('delete-item')){
  console.log('delete item');
  e.target.parentElement.parentElement.remove();
  }   
}

---

5. local & session storage

//set local strage item
localStorage.setItem('name','james');

//set session strage item
sessionStorage.setItem('name','richard');

//remove from storage
localStorage.removeItem('name');

//get from strage
const name = localStorage.getItem('name');
console.log(name);

//clear local Storage
localStorage.clear();

 

document.querySelector('form').addEventListener('submit', function(e){
  const task = document.getElementById('task').value;

  let tasks;
  if(localStorage.getItem('tasks') === null){
  tasks = [];
  }
  else{
    tasks = JSON.parse(localStorage.getItem('tasks'));
  }

  tasks.push(task);

  localStorage.setItem('tasks',JSON.stringify(tasks));
  alert('task saved');

  e.preventDefault();

});

const tasks = JSON.parse(localStorage.getItem('tasks'));

tasks.forEach(function(task){
  console.log(task);
});