[JavaScript] 각종 이벤트

728x90

1. UI 이벤트

console.log(document.querySelector(".tag"));
//load - 페이지와 기타 요소들의 로딩이 완료됬을때
window.onload = function(){
    //로드가 완료되고
    console.log("페이지가 로드됨");
    console.log(document.querySelector(".tag"));
}
// 

window.addEventListener("load", function(){
    //여기도 로드가 완료되고 실행되는 함수
    console.log("페이지가 로드됨2");
})

//어트리뷰트를 사용하거나
//window.addEventListener("이벤트의 타입, 함수")를 사용하여
// 이벤트 핸들러에도 load이벤트를 등록할수 있다.

//resize : 브라우저 창의 크기가 바뀌었을떄 
window.onresize = function(){
    console.log("resize됨")
}

window.addEventListener("resize",function(){
    console.log("사이즈 변함2")
})

//scroll 사용자가 페이지를 스크롤 했을 때
//window.scrollY 브라우저의 스크롤 값 맨위가 0
window.onscroll = function(){
    console.log("스크롤 당하는중");
}

window.addEventListener("scroll", function(){
    console.log("스크롤됨 2")
})

2. 키보드 이벤트

//keydown 사용자가 키를 눌렀을때 누르고 땐게 아니라 누르자 마자
window.onkeydown = function(){
    console.log("키가 입력됨");
}

window.addEventListener("keydown",function(){
    console.log("키입력2")
})

//keyup 사용자가 키를 누르고 땠을때
window.onkeyup = function(){
    console.log("키가 때짐")
}

window.addEventListener("keyup", function(){
    console.log("키가 때짐2")
})

//keypress 사용자가 꾹 누르고 있는동안
window.onkeypress = function(){
    console.log("누르고 있다");
}

window.addEventListener("keypress", function(){
    console.log("누르는중 2")
})

3. 마우스 이벤트

//click 사용자가 페이지 위에서 해당 태그에 마우스를 클릭했을때
window.onclick = function(){
    console.log("클릭")
}

window.addEventListener("click", function(){
    console.log("클릭중2")
})


content.onclick = function(){
    console.log("여기도 컨텐츠다");
}

content.addEventListener("click",function(){
    console.log("여긴 컨텐츠다")
})

//dblclick 더블 클릭 했을때 발동 되는 함수

content.ondblclick = function(){
    console.log("더블클릭")
}

//mousedown 마우스 버튼을 누르자 마자
content.onmousedown = function(){
    console.log("마우스 누르자마자");
}

content.addEventListener("mousedown",function(){
    console.log("마우스 누르자마자2");
})

//단일 함수 추가, 함수를 추가하는게 아니라 갈아끼우는거
//mouseup 마우스 버튼을 누르고 땠을때
content.onmouseup = function(){
    console.log("마우스 땠음");
}
content.onmouseup = function(){
    console.log("마우스 땠음");
}

//다수로 함수를 추가 할수 있다.
content.addEventListener("mouseup",function(){
    console.log("마우스 땜2")
})
content.addEventListener("mouseup",function(){
    console.log("마우스 땜2")
})

//mousemove 마우스가 움직일때

window.onmousemove = function(){
    console.log("마우스가 움직이는중")
}

window.addEventListener("mousemove",function(){
    console.log("마우스 움직인다.")
})

//mouseenter 마우스를 해당 요소의 위로 올렸을때
content.onmouseenter = function(){
    console.log("컨텐츠에 마우스 올림")
}

content.addEventListener("mouseenter",function(){
    console.log("컨텐츠에 마우스 오림2")
})

//mouseleave 마우스가 빠져나왔을떄
content.onmouseleave = function(){
    console.log("마우스 빠져나옴")
}

content.addEventListener("mouseleave",function(){
    console.log("마우스 빠져낭모2")
})

4. 모바일 터치

//touchstart 화면을 눌렀을떄
window.ontouchstart = function(){
    console.log("화면을 눌렀을때")
}
 
//touchend 화면을 땠을때
window.ontouchend = function(){
    console.log("터지 땜")
}

//touchmove 화면에서 터치로 이동할때
window.ontouchmove = function(){
    console.log("화면 이동")
}

//드래그 이벤트
// drag 드래그 하고 있을때
window.ondrag = function(){}

//dragstart  드래그가 시작됬을때
window.ondragstart = function(){}

//dragend 드래그가 끝났을때
window.ondragend = function(){}

//dragenter 드래그하면서 요소 위로 마우스가 올라갔을때
window.ondragenter = function(){}

//dragleave 나갔을때
window.ondragleave = function(){}

//drop 드래그하다가 놓았을떄
window.ondrop = function(){}

5. 버튼 이벤트

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container"></div>
    <input id = "_input" type="text">
    <button id="createBtn">생성</button>
</body>
<script>
    //createElement 태그를 생성
    //createElement(태그의 이름) div면 div태그가 만들어진다
    let el = document.createElement("div")
    el.innerHTML = "안녕하세요"
    el.className += "test";
    // container.innerHTML 문자열로 태그 추가
    container.innerHTML = "<div class = 'aaa'>안녕하세요</div>";

    let _class = "aaaa";
    let aa = "하이요"
    container.innerHTML += `<div ${_class}>${aa}</div>`

    // appendChild 오브젝트 타입의 태그를 자식 요소로 추가할수 있다. 기존 요소가 있다면 제일 나중에 들어감
    // container 의 자식요소로 추가했음
    container.appendChild(el);
    console.log(el)
    removeBtn.onclick = function(){
        //remveChild는 자식 요소 삭제
        //container안에 있는 자식 요소를 삭제한다.
        //removeChild el 요소를 매개변수로 전달 해놓으면 
        //실행시 el의 요소가 삭제 된다.
        container.removeChild(el);
    }

    createBtn.onclick = function(){
        let text = _input.value;
        let el = document.createElement("div");
        el.innerHTML = text;
        // el.className += "test";

        let removeBtn = document.createElement("button");
        removeBtn.innerHTML = "삭제"
        removeBtn.onclick = function(){
            container.removeChild(el);
            container.removeChild(removeBtn);
        }
        container.appendChild(el);
        container.appendChild(removeBtn);
    }
</script>
</html>

728x90

'개발 > html, css, js' 카테고리의 다른 글

[HTML, CSS] 이벤트리스너 (0)	2022.06.09
[HTML, JavaScript] 가위바위보, 일정 캘린더 만들기 (0)	2022.06.07
[JavaScript, CSS] 콜백, 콜백지옥 (0)	2022.06.03
[JavaScript] 배열 관련 문제 2개 (0)	2022.05.31
[JavaScript] 버블정렬, 선택정렬 (0)	2022.05.31

1. UI 이벤트

2. 키보드 이벤트

3. 마우스 이벤트

4. 모바일 터치

5. 버튼 이벤트

'개발 > html, css, js' 카테고리의 다른 글

티스토리툴바