Javascript 용어 정리 (Event)

Event rule

the thing event type the code to run
//button click change the color
//input hits return get search results
//image mouseover display the img caption

addEventListener

const btn = document.querySelector('hi');
btn.addEventListner('click',() => {
alert('you clicked me!!');
})

도망가는 버튼 만들기

const btn = document.querySelector('#clicker');

btn.addEventListener('mouseover', function() {
console.log('dont click me');
const height = Math.floor(Math.random()*window.innerHeight);
const width = Math.floor(Math.random()*window.innerWidth);

btn.style.left=`${width}px`;
btn.style.top=`${height}px`;
});

addEventListner with This(클릭하는 색 보여주기)

const colors = [
    'red',
    'orange',
    'yellow',
    'green',
    'blue',
    'indigo',
    'violet'
];

const changeColor =function () {
    const h1= document.querySelector('h1');
    h1.style.color= this.style.backgroundColor;
}


const container = document.querySelector('#boxes');
for (let color of colors) {
    const box = document.createElement('div');
    box.style.backgroundColor = color;
    box.classList.add('box');
    container.appendChild(box);
    box.addEventListener('click', changeColor);
    
};

Key Events : keypress,keyup & keydown

const input = document.querySelector('input');

input.addEventListener('keydown', function (e){
    console.log('key down');
}) //딱 눌렀을때 발생 

input.addEventListener('keyup', function(e) {
    console.log('key up');
})//딱 떼면 발생 

input.addEventListener('keypress', function(e) {
    console.log('key press');
})//보여지는 값이 입력될때 발생 

간단한 to-do 만들기

const addItemInput = document.querySelector('#addItem');
const itemsUL= document.querySelector('#items');

addItemInput.addEventListener('keypress', function(e) {
if(e.key === 'Enter') {
    const newItemText= this.value;
    const newItem =document.createElement('li');
    newItem.innerText=newItemText;
    itemsUL.appendChild(newItem);
    this.value='';
}} );

.preventDefault

-form 을 submit 했을때 기본적인 default값으로는 새로운 페이지로 넘어가는데 그걸 막기위해서 해당 method 사용 가능하다 for example

const form=document.querySelector('#signup-form');
form.addEventListener('submit', function (e) {
  alert("submitted the form");  
  console.log('cc',creditCardInput.value);
  console.log('terms',termsCheckbox.checked);
  console.log('veggieSelect',veggieSelect.value);
  e.preventDefault();//이렇게 해주면 아래 내용을 console에 출력하고 새로운 페이지로 넘어가지 않음 
});


const creditCardInput=document.querySelector('#cc');
const termsCheckbox=document.querySelector('#terms');
const veggieSelect = document.querySelector('#veggie');

Promises

call stack