반응형
addEventListener
자바스크립트에서는 특정 HTML 요소에 이벤트 리스너를 추가하여, 이벤트 조건이 발동 되었을 때(클릭 등) 이벤트 핸들러 함수를 실행시킬 수 있다.
이벤트에는 "click", "mousedown", "mouseup", "mouseover" 등 다양한 이벤트가 있다.
사용법
var st = document.getElementById("stalker");
st.addEventListener('이벤트종류', '함수이름');예
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var myBtn = document.getElementById("myBtn");
myBtn.addEventListener("click", myBtnClickHandler);
}
function myBtnClickHandler() {
alert("myBtn이 클릭되었습니다");
}
</script>
</head>
<body>
<button id="myBtn">내버튼</button>
</body>
</html>addEventListener 등으로 등록 할 수 있는 이벤트는 여러 종류가 있다. 그 중 가장 자주 쓰이는 이벤트 목록이다.
|
change |
변동이 있을시 발생 |
|
click |
클릭시 발생 |
|
focus |
포커스를 얻었을때 발생 |
|
keydown |
키를 눌렀을때 발생 |
|
keyup |
키에서 손을 땟을때 발생 |
|
load |
로드가 완료 되었을때 발생 |
|
mousedown |
마우스를 클릭 했을때 발생 |
|
mouseout |
마우스가 특정 객체 밖으로 나갔을 때 발생 |
|
mouseover |
마우스가 특정 객체 위로 올려졌을 시에 발생 |
|
mousemove |
마우스가 움직였을 때 발생 |
|
mouseup |
마우스에서 손을 땟을때 발생 |
|
select |
option 태그 등에서 선택을 했을때 발생 |
이벤트 핸들러 함수의 첫번째 인자
addEventListener으로 생성한 이벤트 핸들러 함수의 첫번째 인자는 이벤트 객체로, 그 속성들 중 target이란 속성은 이벤트가 호출된 객체를(예를 들면 클릭된 객체) 반환한다.
예
// Internet Explorer 구버전 브라우저 미호환
function myBtnsClickHandler(e) {
alert( e.target.id + "이 클릭되었습니다");
}
myBtn1.addEventListener("click", myBtnsClickHandler);
myBtn2.addEventListener("click", myBtnsClickHandler);
myBtn3.addEventListener("click", myBtnsClickHandler);
// Internet Explorer 구버전 브라우저 호환
function myBtnsClickHandler(e) {
var event = e || window.event;
var targetElement = event.target || event. srcElement;
alert( targetElement.id + "이 클릭되었습니다");
}반응형