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 |