에 대해 생각하기페이지 이벤트
: HTML 페이지는 어떤 순서로 로드됩니까?
답변: 페이지는 코드가 작성된 순서대로 위에서 아래로 로드됩니다.
발생할 수 있는 문제 : 페이지가 로드되기 전에 JavaScript를 사용하여 DOM 요소를 작동하는 경우 구문 오류가 발생합니다.
해결 방법 : 페이지 이벤트는 JavaScript 코드의 실행 타이밍을 변경할 수 있습니다.
포커스 이벤트
웹 개발에서 포커스 이벤트는 주로 폼 유효성 검사 기능에 사용되며 가장 일반적으로 사용되는 이벤트 중 하나입니다.
예를 들어, 텍스트 상자에 포커스가 있을 때 텍스트 상자의 스타일을 변경하고, 텍스트 상자가 포커스를 잃었을 때 텍스트 상자에 입력된 데이터의 유효성을 검사하는 등입니다.
모든 사람이 포커스 이벤트 사용 방법을 더 잘 이해할 수 있도록 사용자 이름과 비밀번호가 비어 있는지 확인하는 데모는 다음과 같습니다.
코드 구현
<!DOCTYPE HTML>
<머리>
<meta charset="UTF-8">
<title>사용자 이름과 비밀번호가 비어 있는지 확인</title>
<스타일>
본문{배경:#ddd;}
.box{배경:#fff;패딩:20px 30px;너비:400px;여백: 0 자동;텍스트-정렬:센터;}
.btn{너비:180px;높이:40px;배경:#3388ff;테두리:1px 단색 #fff;색상:#fff;글꼴 크기:14px;}
.ipt{너비:260px;패딩:4px 2px;}
.tips{너비:440px;높이:30px;여백:5px 자동;배경:#fff;색상:빨간색;테두리:1px 단색 #ccc;디스플레이:없음;라인 높이:30px;패딩-왼쪽:20px;글꼴- 크기:13px;}
</style>
</head>
<본문>
<p id="tips" class="tips"></p>
<p 클래스="상자">
<p><label>사용자 이름: <input id="user" class="ipt" type="text"></label></p>
<p><label>비밀번호: <input id="pass" class="ipt" type="password"></label></p>
<p><button id="login" class="btn">로그인</button></p>
</p>
<스크립트>
window.onload = 함수() {
addBlur($('user')); // id가 user인 요소가 포커스를 잃은 후 값이 비어 있는지 확인합니다. addBlur($('pass')); 패스의 ID가 포커스를 잃습니다. 값이 비어 있는지 여부};
function $(obj) { // ID를 기반으로 지정된 요소를 가져옵니다. return document.getElementById(obj);
}
function addBlur(obj) { // 지정된 요소에 대한 포커스 손실 이벤트 추가 obj.onblur = function() {
isEmpty(this);
};
}
function isEmpty(obj) { // 양식이 비어 있는지 확인 if (obj.value === '') {
$('tips').style.display = '차단';
$('tips').innerHTML = '참고: 입력 내용은 비워둘 수 없습니다!
} 또 다른 {
$('tips').style.display = '없음';
}
}
</script>
</body>
</html> 마우스 이벤트
마우스 이벤트는 웹 개발에서 가장 일반적으로 사용되는 이벤트입니다.
예를 들어, 마우스를 슬라이드할 때 탭 표시줄에 표시되는 콘텐츠를 전환하고, 상태 상자를 드래그하여 표시 위치를 조정하는 등의 작업을 수행합니다. 이러한 일반적인 웹 페이지 효과는 모두 마우스 이벤트를 사용합니다.
프로젝트 개발에는 현재 마우스 위치 정보를 얻는 데 사용되는 일반적으로 사용되는 일부 마우스 속성이 포함되는 경우가 많습니다.
pageX 및 pageY 속성은 IE6-8 브라우저에서 호환되지 않습니다. 따라서 프로젝트 개발 시에는 IE6~8 브라우저와의 호환성이 필요합니다.
문서의 마우스 좌표는 현재 창의 마우스 좌표에 스크롤 막대로 굴린 텍스트의 길이를 더한 값과 같습니다.
모든 사람이 마우스 이벤트의 사용을 더 잘 이해할 수 있도록 마우스 클릭 위치의 원형 표시를 예로 들어 보겠습니다.
코드 구현
<!DOCTYPE HTML>
<머리>
<meta charset="UTF-8">
<title>마우스 클릭 위치 표시</title>
<스타일>
.mouse{위치:절대;배경:#ffd965;너비:40px;높이:40px;border-radius:20px;}
</style>
</head>
<본문>
<p id="마우스" 클래스="마우스"></p>
<스크립트>
var mouse = document.getElementById('mouse');
//요구사항: 페이지에서 마우스 클릭 시 클릭 위치를 획득하고 작은 점 document.onclick = function(event) {
// 이벤트 객체의 호환 처리를 가져옵니다. var event = event ||
// 페이지에서의 마우스 위치 var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// <p>가 표시될 위치를 계산합니다. var targetX = pageX - mouse.offsetWidth / 2;
var targetY = pageY - mouse.offsetHeight / 2;
// 마우스로 클릭한 위치에 <p>를 표시합니다.
mouse.style.display = '차단';
mouse.style.left = targetX + 'px';
mouse.style.top = targetY + 'px';
};
</script>
</body>
</html> [사례] 마우스 드래그 효과
상자 위치(왼쪽 및 위쪽 값) = 마우스 위치(왼쪽 및 위쪽 값) - 마우스를 눌렀을 때 마우스와 상자 사이의 거리(왼쪽 및 위쪽 값)입니다.
예를 들어보세요
코드 구현 아이디어 :
① HTML을 작성하고 팝업 상자를 디자인하여 드래그 앤 드롭 효과를 구현합니다.
② 드래그바에 mousedown 이벤트와 핸들러를 추가합니다.
③ 마우스 드래그 효과를 얻기 위해 마우스 이동 이벤트를 처리합니다.
④ 마우스 버튼을 놓은 후 팝업 상자가 더 이상 움직이지 않도록 마우스 버튼을 놓는 이벤트를 처리합니다.
코드 구현
<!DOCTYPE HTML>
<html>
<머리>
<meta charset="UTF-8">
<title>마우스 드래그</title>
<스타일>
본문{여백:0}
.box{너비:400px;높이:300px;테두리:5px 솔리드 #eee;box-shadow:2px 2px 2px 2px #666;위치:절대;위쪽:30%;왼쪽:30%}
.hd{너비:100%;높이:25px;배경색:#7c9299;테두리 바닥:1px 단색 #369;라인 높이:25px;색상:#fff;커서:이동}
#box_close{float:right;cursor:pointer}
</style>
</head>
<본문>
<p id="상자" 클래스="상자">
<p id="drop" 클래스="hd">
등록정보(드래그 앤 드롭 가능)
<span id="box_close">【닫기】</span>
</p>
<p class="bd"></p>
</p>
<스크립트>
// 드래그된 상자를 가져오고 스트립을 드래그합니다. var box = document.getElementById('box');
var drop = document.getElementById('drop');
drop.onmousedown = function(event) { // 드래그 바를 마우스로 눌러 상자를 드래그합니다. var event = event ||
// 마우스를 눌렀을 때 위치를 가져옵니다. var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// 상자에서 마우스 클릭 위치를 계산합니다. var spaceX = pageX - box.offsetLeft;
var spaceY = pageY - box.offsetTop;
document.onmousemove = function(event) { // 마우스가 움직일 때 마우스 위치를 가져옵니다. 전체 상자가 마우스 위치를 따릅니다. var event = event ||
// 이동 후 마우스 위치 가져오기 var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// 이동 후 상자의 위치를 계산하고 설정합니다. box.style.left = pageX - spaceX + 'px';
box.style.top = pageY - spaceY + 'px';
};
};
document.onmouseup = function() {//마우스 버튼을 놓으면 상자 이동 취소 document.onmousemove = null;
};
</script>
</body>
</html> 키보드 이벤트
키보드 이벤트는 사용자가 키보드를 사용할 때 발생하는 이벤트를 의미합니다.
예를 들어 사용자는 Esc 키를 눌러 열린 상태 표시줄을 닫고 Enter 키를 눌러 커서를 직접 위아래로 전환하는 등의 작업을 수행합니다.
다음은 Enter 키 전환의 사용을 보여줍니다. 자세한 내용은 예시와 같습니다.
코드 구현
<!DOCTYPE HTML>
<머리>
<meta charset="UTF-8">
<title>전환하려면 Enter를 누르세요</title>
</head>
<본문>
<p>사용자 이름: <input type="text"></p>
<p>이메일: <input type="text"></p>
<p>휴대폰번호: <input type="text"></p>
<p>개인 설명: <input type="text"></p>
<스크립트>
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
inputs[i].onkeydown = 함수(e) {
// 이벤트 객체의 호환 처리를 가져옵니다. var e = event ||
// 누른 키가 Enter인지 확인합니다. 그렇다면 다음 입력에 포커스를 둡니다. if (e.keyCode === 13) {
// 모든 입력 상자를 탐색하고 현재 입력의 첨자를 찾습니다. for (var i = 0; i < inputs.length; ++i) {
if (입력[i] === this) {
// 다음 입력 요소의 인덱스를 계산합니다. var index = i + 1 >= inputs.length ? 0 : i + 1;
부서지다;
}
}
// 다음 입력이 여전히 텍스트 상자인 경우 키보드 포커스를 가져옵니다. if (inputs[index].type === 'text') {
inputs[index].focus(); // 포커스 이벤트 트리거 }
}
};
}
</script>
</body>
</html> keypress 이벤트에 저장된 키 값은 ASCII 코드이고,
keydown, keyup 이벤트에 저장된 키 값은 가상 키 코드임을
참고하세요
.자세한 내용은 MDN 등의 매뉴얼을 참고하세요.
폼 이벤트
폼 이벤트는 웹 폼 운영 시 발생하는 이벤트를 의미합니다.
예를 들어 제출 전 양식 확인, 양식 재설정 시 확인 작업 등이 있습니다. JavaScript는 관련 양식 이벤트를 제공합니다.
다음은 양식 데이터를 제출하고 재설정할지 여부를 예시로 보여줍니다. 자세한 내용은 예시와 같습니다.
코드 구현
<!DOCTYPE HTML>
<머리>
<meta charset="UTF-8">
<title>양식 이벤트</title>
</head>
<본문>
<양식 id="등록">
<label>사용자 이름: <input id="user" type="text"></label>
<입력 유형="제출" 값="제출">
<입력 유형="재설정" 값="재설정">
</form>
<스크립트>
// 확인이 필요한 양식 및 요소 객체를 가져옵니다. var regist = document.getElementById('register');
var user = document.getElementById('user');
regist.onsubmit = function(event) { // 양식에 제출 이벤트를 추가합니다. // 이벤트 객체를 가져오고 현재 이벤트 유형을 출력합니다. var event = event window.|
console.log(event.type);
// 양식 요소 내용이 비어 있는지 확인합니다. 비어 있으면 false를 반환하고, 그렇지 않으면 true를 반환합니다.
user.value를 반환합니까? true: false;
};
regist.onreset = function (event) { // 재설정 이벤트를 양식에 추가합니다. // 이벤트 객체를 가져오고 현재 이벤트 유형을 출력합니다. var event = event window.|
console.log(event.type);
// 재설정을 확인할지 여부를 결정합니다. "확인"을 눌러 true를 반환하고 "취소"를 눌러 false를 반환합니다.
return verify('정보 재설정 여부를 확인해 주세요. 재설정 후에는 양식에 기재된 모든 내용이 삭제됩니다.');
};
</script>
</body>
</html> 실제
사진 확대 효과
분석 이미지 확대 효과 구현 방법:
① 작은 사진과 큰 사진 두 장의 동일한 사진을 준비합니다.
② 상품 표시 영역에 썸네일이 표시됩니다.
③ 큰 이미지는 작은 이미지 위에서 마우스를 움직일 때 큰 이미지의 해당 영역을 비례적으로 표시하는 데 사용됩니다.
코드 구현 아이디어 :
① 작은 그림, 마우스를 숨기는 마스크, 큰 그림을 표시하는 HTML 페이지를 작성합니다.
② 작은 이미지 위에서 마우스를 움직이면 마우스 마스크와 큰 이미지가 표시됩니다.
③ 마우스가 움직이면 작은 그림에서 마스크가 움직이도록 합니다.
④ 작은 이미지에서는 마스크의 이동 범위를 제한합니다.
⑤ 작은 이미지의 마스크 적용 범위를 기준으로 큰 이미지를 비례적으로 표시합니다.