🍁Event
이벤트는 사건을 의미한다.
객체(태그 포함)에서 발생하는 사건을 전부 이벤트라고 부른다.
이벤트는 언제 발생할지 예측이 불가능하다.
🍂Event Handling
이벤트 핸들링은 이벤트 처리/등록에 관한 기능이다.
언제 발생할지 예측 불가능한 사건에 대비해 처리할 코드를 미리 준비해서 언젠가 사건이 발생하면 코드를 자동으로 실행하도록 할 수 있다.
Oracle의 Trigger와 비슷한 느낌의 기능을 한다.
이벤트 등록
onXXX 속성(프로퍼티)을 제공한다.
동적 방식을 사용하면 HTML에 JavaScript 코드를 적지 않아도 되기 때문에 보통 동적 방식을 많이 사용한다.
코드 관리 차원에서 동적 방식을 주로 사용하는 편이다.
정적 방식
<body>
<h1>Event</h1>
<form name="form1">
<input type="text" name="txt1">
<input type="button" value="버튼" name="btn1" onclick="window.document.form1.txt1.value = 'Isaac';">
</form>
</body>
정적 방식은 HTML 태그에 적용한다.
사건이 발생할 거 같은 위치를 찾아서 on을 입력하여 내가 원하는 속성을 찾는다. 그리고 버튼에 클릭이라는 사건이 터질 때 코드를 실행시키게 하고 싶으므로 onclick 속성을 입력한 뒤, 해당 위치에 코드를 입력한다.
이제 버튼을 클릭하면 'Isaac'이 txt1 박스에 입력된다.
<body>
<h1>Event</h1>
<form name="form1">
<input type="text" name="txt1">
<input type="button" value="버튼" name="btn1" onclick="window.document.form1.txt1.value = 'Isaac';">
<input type="button" value="버튼" name="btn2" onclick="m1();">
</form>
<script>
function m1() {
window.document.form1.txt1.value = 'Sopia';
}
</script>
</body>
코드의 길이가 늘어나면 관리에 어려움이 있으므로 함수로 처리하는 편이 좋다.
이는 100% 이벤트가 걸리는 방식으로 통제할 수 없으므로 정적 방식이라고 부른다.
동적 방식
<body>
<h1>Event</h1>
<form name="form1">
<input type="text" name="txt1">
<input type="button" value="버튼" name="btn3">
</form>
<script>
window.document.form1.btn3.onclick = m3; //함수 포인터
function m3() {
window.document.form1.txt1.value = 'Lee';
}
</script>
</body>
동적 방식은 자바스크립트에서 사용한다.
window.document.form1.btn3.onclick = m3; //함수 포인터위 코드의 함수 포인터는 함수의 위치값이다. 이는 함수 자체가 속성의 값으로 들어간다고 보면 된다.
이 코드는 프로그램의 실행 상황에 따라 이벤트가 걸릴 수도, 걸리지 않을 수도 있다. 그래서 동적이라고 부르는 것이다.
🍁마우스 관련 이벤트
마우스 관련 이벤트는 onmouseXXX 형태를 가진다.
onmouseover/onmouseenter
앞의 이벤트가 먼저 나오고, 뒤의 이벤트가 먼저 나온 것이다.
해당 객체 영역에 마우스 커서가 진입하는 순간 발생한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea {
display: block;
width: 500px;
height: 300px;
outline: none;
resize: none;
}
</style>
</head>
<body>
<h1>마우스 관련 이벤트</h1>
<form name="form1">
<textarea name="txt1"></textarea>
</form>
<script>
var txt1 = window.document.form1.txt1;
txt1.onmouseover = m1;
function m1() {
//alert();
window.document.body.bgColor = 'cornflowerblue';
}
</script>
</body>
</html>
변수 이름과 태그 이름은 성질 자체가 다르기 때문에 txt1로 같지만 충돌이 발생하지 않는다.
커서가 상자 위에 올라가자 배경색이 cornflowerblue로 바뀌었다.
onmouseout/onmouseleave
해당 객체 영역에서 마우스 커서가 빠져나가는 순간 발생한다.
<script>
var txt1 = window.document.form1.txt1;
function message(txt) {
var now = new Date();
txt1.value = now.toLocaleTimeString() + ':' + txt + '\r\n' + txt1.value;
}
txt1.onmouseover = m1;
txt1.onmouseout = m2;
function m1() {
message('mouseover');
}
function m2() {
message('mouseout');
}
</script>
위 코드는 로그를 기록하는 방식이기도 하다.
마우스가 박스 위에 올라갔다가 빠져나갔을 때 기록이 된다.
onmousedown
해당 객체 영역에서 마우스 버튼을 누르는 순간 발생한다.
onmouseup
해당 객체 영역에서 마우스 버튼을 떼는 순간 발생한다.
<script>
var txt1 = window.document.form1.txt1;
function message(txt) {
var now = new Date();
txt1.value = now.toLocaleTimeString() + ':' + txt + '\r\n' + txt1.value;
}
txt1.onmousedown = m3;
txt1.onmouseup = m4;
function m3() {
message('mousedown');
}
function m4() {
message('mouseup');
}
</script>
마우스에 추가 버튼(오른쪽 버튼, 휠 버튼)에도 반응한다.
마우스 입력 종류
txt1.onmousedown = m1;
function m1() {
message(event.buttons);
if (event.buttons == 2){
alert('오른쪽 버튼 클릭 금지!!');
}
}
- 1: 왼쪽
- 2: 오른쪽
- 3: 가운데
- 4: 왼쪽 + 가운데
- 5: 오른쪽 + 가운데
- 6: 왼쪽 + 오른쪽 + 가운데
사용자가 어떤 버튼을 눌렀는지 구체적으로 확인할 수 있다.
onmousemove
해당 객체 영역에서 마우스 커서가 움직일 때 발생한다.
<script>
var txt1 = window.document.form1.txt1;
function message(txt) {
var now = new Date();
txt1.value = now.toLocaleTimeString() + ':' + txt + '\r\n' + txt1.value;
}
txt1.onmousemove = m5;
function m5() {
message('mosemove>' + event.offsetX + ',' + event.offsetY);
}
</script>
마우스 궤적을 기록하여 차트나 그래프로 만들 수 있다.
사용자들의 마우스 궤적을 분석하여 더 나은 화면을 만드는 데 사용할 수 있다.
🍂마우스 커서 좌표
주로 clientX, clientY와 offsetX, offsetY를 사용한다.
1. x, y
문서의 좌측 상단을 기준으로 한다.
이 속성은 MS가 만든 비표준 방식으로, 정식 자바스크립트의 기준이 아니다.
txt1.onmousedown = m1;
function m1() {
message('>' + event.x + ',' + event.y);
}
2. clientX, clientY
문서 좌측 상단을 기준으로 한다.
이 속성이 표준이므로 x, y보다 사용을 권장한다.
좌표값은 x, y와 동일하다.
txt1.onmousedown = m1;
function m1() {
message('>' + event.x + ',' + event.y);
message('>' + event.clientX + ',' + event.clientY);
}
3. screenX, screenY
원점이 모니터 좌측 상단을 기준으로 한다.
화면 밖을 벗어나기 때문에 취급하기 어렵다.
txt1.onmousedown = m1;
function m1() {
message('>' + event.screenX + ',' + event.screenY);
}
4. offsetX, offsetY
이벤트 객체의 좌측 상단을 기준으로 한다.
txt1.onmousedown = m1;
function m1() {
message('>' + event.offsetX + ',' + event.offsetY);
}
마우스 이벤트 밖에서의 마우스 정보
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea {
display: block;
width: 500px;
height: 300px;
outline: none;
resize: none;
margin-bottom: 5px;
}
</style>
</head>
<body>
<h1>마우스 관련 이벤트</h1>
<form name="form1">
<textarea name="txt1"></textarea>
<input type="button" value="버튼" name="btn1">
</form>
<script>
var txt1 = window.document.form1.txt1;
function message(txt) {
var now = new Date();
txt1.value = now.toLocaleTimeString() + ':' + txt + '\r\n' + txt1.value;
}
txt1.onmousemove = m5;
function m5() {
message('mosemove>' + event.offsetX + ',' + event.offsetY);
}
window.document.form1.btn1.onclick = m6;
function m6() {
alert(event.offsetX + ',' + event.offsetY);
alert(event.buttons); //알 수 없음
}
</script>
</body>
</html>
onclick은 마우스 이벤트가 아니다.
키보드로도 할 수 있고, 터치로도 할 수 있고 이외에도 다양한 방법이 있기 때문에 mouse라는 이름이 붙지 않았다.
마우스 이벤트 밖에서는 마우스에 대한 정보(입력 종류)를 알 수 없다.
