Amarans
0424 JavaScript | Event - 문서로딩/마우스 , jQuery - on Api 사용법 | 본문
문서 로딩
웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 한다. 이것을 알려주는 이벤트가 load, DOMContentLoaded이다.
아래 코드의 실행결과는 null이다. <p id="target">Hello</p>가 로딩되기 전에 자바스크립트가 실행되었기 때문이다.
<html>
<head>
<script>
var t = document.getElementById('target');
console.log(t);
</script>
</head>
<body>
<p id="target">Hello</p>
</body>
</html>이를 해결하기 위한 방법은 아래와 같이 스크립트를 문서 끝에 위치시키는 것이다.
<p id="target">Hello</p>
<script>
var t = document.getElementById('target');
console.log(t);
</script>헤드 밑이 아닌 바디 밑 p태그 밑
또 다른 방법은 load 이벤트를 이용하는 것이다.
<head>
<script>
window.addEventListener('load', function(){
var t = document.getElementById('target');
console.log(t);
})
</script>
</head>
<body>
<p id="target">Hello</p>
</body>그런데 load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행된다. 이것을 에플리케이션의 구동이 너무 지연되는 부작용을 초래할 수 있다.
DOMContentLoaded는 문서에서 스크립트 작업을 할 수 있을 때 실행되기 때문에 이미지 다운로드를 기다릴 필요가 없다.
<html>
<head>
<script>
window.addEventListener('load', function(){
console.log('load');
})
window.addEventListener('DOMContentLoaded', function(){
console.log('DOMContentLoaded');
})
</script>
</head>
<body>
<p id="target">Hello</p>
</body>
</html>DOMContentLoaded 이벤트는 IE9을 포함한 모든 브라우저에서 지원하고 있다.
마우스
이벤트 유형
웹 브라우저는 마우스와 관련하여 다양한 이벤트 옵션을 지원한다.
- 클릭 클릭
이벤트 발생 이벤트를 클릭하십시오 . - dblclick
더블 클릭을 - mousedown
마우스를 누를 때 - mouseup
마우스 버튼을 - mousemove
마우스를 움직일 때 - 마우스 오버
마우스가 엘리먼트에 진입 할 때 발생 - mouseout
마우스 - 상황에
맞는 메뉴
키보드 조합
마우스 이벤트가 호출 될 때 특수 키 (alt, ctrl, shift)가 눌려진 상태를 감지해야합니다. 이 때 사용하고 있습니다.
- event.shiftKey
- event.altKey
- event.ctrlKey
마우스 위치
clientX와 clientY를 사용합니다.
<html>
<head>
<style>
body{
background-color: black;
color:white;
}
#target{
width:200px;
height:200px;
background-color: green;
margin:10px;
}
table{
border-collapse: collapse;
margin:10px;
float: left;
width:200px;
}
td, th{
padding:10px;
border:1px solid gray;
}
</style>
</head>
<body>
<div id="target">
</div>
<table>
<tr>
<th>event type</th>
<th>info</th>
</tr>
<tr>
<td>click</td>
<td id="elmclick"></td>
</tr>
<tr>
<td>dblclick</td>
<td id="elmdblclick"></td>
</tr>
<tr>
<td>mousedown</td>
<td id="elmmousedown"></td>
</tr>
<tr>
<td>mouseup</td>
<td id="elmmouseup"></td>
</tr>
<tr>
<td>mousemove</td>
<td id="elmmousemove"></td>
</tr>
<tr>
<td>mouseover</td>
<td id="elmmouseover"></td>
</tr>
<tr>
<td>mouseout</td>
<td id="elmmouseout"></td>
</tr>
<tr>
<td>contextmenu</td>
<td id="elmcontextmenu"></td>
</tr>
</table>
<table>
<tr>
<th>key</th>
<th>info</th>
</tr>
<tr>
<td>event.altKey</td>
<td id="elmaltkey"></td>
</tr>
<tr>
<td>event.ctrlKey</td>
<td id="elmctrlkey"></td>
</tr>
<tr>
<td>event.shiftKey</td>
<td id="elmshiftKey"></td>
</tr>
</table>
<table>
<tr>
<th>position</th>
<th>info</th>
</tr>
<tr>
<td>event.clientX</td>
<td id="elemclientx"></td>
</tr>
<tr>
<td>event.clientY</td>
<td id="elemclienty"></td>
</tr>
</table>
<script>
var t = document.getElementById('target');
function handler(event){
var info = document.getElementById('elm'+event.type);
var time = new Date();
var timestr = time.getMilliseconds();
info.innerHTML = (timestr);
if(event.altKey){
document.getElementById('elmaltkey').innerHTML = timestr;
}
if(event.ctrlKey){
document.getElementById('elmctrlkey').innerHTML = timestr;
}
if(event.shiftKey){
document.getElementById('elmshiftKey').innerHTML = timestr;
}
document.getElementById('elemclientx').innerHTML = event.clientX;
document.getElementById('elemclienty').innerHTML = event.clientY;
}
t.addEventListener('click', handler);
t.addEventListener('dblclick', handler);
t.addEventListener('mousedown', handler);
t.addEventListener('mouseup', handler);
t.addEventListener('mousemove', handler);
t.addEventListener('mouseover', handler);
t.addEventListener('mouseout', handler);
t.addEventListener('contextmenu', handler);
</script>
</body>
</html>https://output.jsbin.com/pepib/4/
https://output.jsbin.com/pepib/4/
output.jsbin.com
실행 결과 페이지
jQuery 이벤트
jQuery는 이벤트와 관련해서 편리한 기능을 제공한다. 아래 예제는 직접 이벤트 프로그래밍을 하는 것과 jQuery를 이용하는 것의 차이점을 보여준다.
<input type="button" id="pure" value="pure" />
<input type="button" id="jquery" value="jQuery" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
// 순수하게 구현했을 때
var target = document.getElementById('pure');
if(target.addEventListener){
target.addEventListener('click', function(event){
alert('pure');
});
} else {
target.attachEvent('onclick', function(event){
alert('pure');
});
}
// jQuery를 사용했을 때
$('#jquery').on('click', function(event){
alert('jQuery');
})
</script>코드 분량에 큰차이가 있다. jQuery는 크로스 브라우징을 알아서 처리해주고, 이벤트를 보다 적은 코드로 구현할 수 있도록 해준다. 이런 이유 때문에 jQuery와 같은 라이브러리를 사용하는 것이다.
on API 사용법
on의 기본적인 문법은 아래와 같다.
.on( events [, selector ] [, data ], handler(eventObject) )- event : 등록하고자 하는 이벤트 타입을 지정한다. (예: "click")
- selector : 이벤트가 설치된 엘리먼트의 하위 엘리먼트를 이벤트 대상으로 필터링함
- data : 이벤트가 실행될 때 핸들러로 전달될 데이터를 설정함
- handler : 이벤트 핸들러 함수
selector
selector 파라미터는 이벤트 대상을 필터링한다.
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
$('ul').on('click','a, li', function(event){
console.log(this.tagName);
})
</script>결과
A
LI위의 예제는 ul 엘리먼트의 하위 엘리먼트 중에 a, li 엘리먼트들에 대해서만 이벤트가 발생한다. 주의 할 것은 ul 엘리먼트는 이벤트가 발생하지 않는다는 점이다. 이것은 jQuery에서 이벤트 버블링을 구현하는 방법이기도 하다.
late binding
jQuery는 존재하지 않는 엘리먼트에도 이벤트를 등록할 수 있는 놀라운 기능을 제공한다.
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
$('ul').on('click','a, li', function(event){
console.log(this.tagName);
})
</script>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>위의 코드는 실행되지 않는다. ul 엘리먼트가 존재하지 않을 때 이벤트 설치를 시도하고 있기 때문이다. 존재하지 않는 엘리먼트에 이벤트를 달 수 없다는 것은 이미 배운 바가 있다. 그런데 jQuery는 존재하지 않는 엘리먼트에게도 이벤트를 설치할 수 있다.
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
$('body').on('click','a, li', function(event){
console.log(this.tagName);
})
</script>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>다중 바인딩
하나의 엘리먼트에 여러개의 이벤트 타입을 동시에 등록하는 방법을 알아보자.
<input type="text" id="target" />
<p id="status"></p>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
$('#target').on('focus blur', function(e){
$('#status').html(e.type);
})
</script>한번에 여러개의 이벤트 타입을 선택했다. 만약 이벤트에 따라서 다른 핸들러를 실행하고 싶다면 아래와 같이 코드를 변경한다.
<input type="text" id="target" />
<p id="status"></p>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
$('#target').on({
'focus' : function(e){
},
'blur' : function(e){
}
})
</script>이벤트 제거
이벤트를 제거할 때는 off를 사용한다.
<input type="text" id="target"></textarea>
<input id="remove" type="button" value="remove" />
<p id="status"></p>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
var handler = function(e){
$('#status').text(e.type+Math.random());
};
$('#target').on('focus blur', handler)
$('#remove').on('click' , function(e){
$('#target').off('focus blur', handler);
console.log(32);
})
</script>
'JavaScript2' 카테고리의 다른 글
| 0427 JavaScript | Ajax , JSON , jQuer Ajax | (0) | 2020.04.27 |
|---|---|
| 0423 JavaScript | 이벤트 전파 - 버블링 / 캡처링 , 기본동작 취소 , 폼 | (0) | 2020.04.23 |
| 0422 JavaScript | 이벤트 | (0) | 2020.04.22 |
| 0422 JavaScript | 문서의 기하학적 특성 | (0) | 2020.04.22 |
| 0421 JavaScript | Text객체 , 값 API , 조작 API | (0) | 2020.04.21 |
'JavaScript2' Related Articles
more
Comments