반응형
| 이벤트 속성명 | 설명 |
| onclick | 마우스로 클릭할 때 |
| onmouseover(hover 1단계) | 요소 안에 마우스가 들어갔을 때 |
| onmouseover(hover 2단계) | 요소에서 마우스가 벗어났을 때 |
| onkeydown | 키보드를 입력할 때 |
| onkeyup | 키를 눌렀다 놓을 때 |
| onfocus , onblur | 요소가 선택됐거나 해제됐을 때(블록지정?) |
| onsubmit | 폼 전송 이벤트가 발생했을 때 |
<!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>
<a href ="www.naver.com" onclick="alert('구글로 이동합니다')">구글</a>
</body>
</html>작은 따옴표 잘 구분해주세요 저는 다 큰 따옴표로 썼는데 이제 구분해서 써야겠습니다.
<!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>
<script>
window.onload = function(){
var h1 = document.querySelector('h1');
h1.innerHTML = '문서를 로딩했습니다.';
}
</script>
<body>
<h1>홈페이지에 오신 것을 환영합니다.</h1>
</body>
</html>바로 바뀌는 것이 아닌 홈페이지에 엑세스 됐을 때 바뀝니다. 새로고침 연타해서 보시면 바뀌과정이 눈에 보입니다.
window.onload란 홈페이지가 떴을때 function을 실행시키는 것입니다.
<!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>
<script>
window.onload = function(){
var h1 = document.querySelector('h1');
h1.onclick = function(){
this.innerHTML = '문서를 로딩했습니다.';
}
}
</script>
<body>
<h1>홈페이지에 오신 것을 환영합니다.</h1>
</body>
</html>홈페이지가 준비가 완료되면 h1 css생성자를 가져오고 h1.onclick 을 사용할 수 있게 합니다.
this는 자기자신을 의미합니다. 여기선 h1을 의미하죠
// ──────────────────────────── 이벤트 바인딩 ────────────────────────────
// 우측 마우스 클릭시 이벤트 리스너
document.addEventListener('contextmenu', handleCreateContextMenu);
// 좌측 마우스 클릭시 이벤트 리스너
document.addEventListener('click', handleClearContextMenu);
// 드래그 했을 때 이벤트 리스너
document.addEventListener("drag", function (event) {
console.log("이동 중");
}, false);
// 블럭지정 했을 때 이벤트 리스너
document.addEventListener('selectionchange', () => {
console.log(document.getSelection().toString()); // 블럭지정 내용
});반응형
'[JavaScript] > [JavaScript Code]' 카테고리의 다른 글
| [JavaScript Code] 예 아니오 Alert 기능 (0) | 2022.03.06 |
|---|---|
| [JavaScript Code] ajax 페이지네이션 (0) | 2022.03.01 |
| [JavaScript Code] 다중 이벤트 핸들링 (addEventListener) (0) | 2021.06.29 |
| [JavaScript Code] setAttribute, getAttribute, removeAttribute 속성 지정 (0) | 2021.06.29 |
| [JavaScript Code] id, 선택자, 태그, 클래스로 접근하기 (0) | 2021.06.29 |