이벤트 핸들러(이벤트발생시 실행될 function) 연결 방법 종류
방법1. 이벤트 메소드를 통한 연결
•
$("선택자").이벤트메소드(function(){
해당 요소에 해당 이벤트 발생시 실행할 내용;
});
<h4 id="test1">클릭해보세요</h4>
<script>
$(function(){ // 클릭이벤트
$("#test1").click(function(){
$(this).html("클릭되었습니다!!");
});
$("#test1").dblclick(function(){
$(this).css("color", "red");
});
})
</script>
JavaScript
복사
방법2. on메소드를 이용한 방법
•
$("선택자").on("이벤트명", function(){
해당 요소에 해당 이벤트 발생시 실행할 내용;
});
•
on 메소드를 통해 이벤트 연결시 한 요소에 다중으로 이벤트걸기 가능
<h4 id="test2">마우스 클릭 및 올려보세요</h4>
<script>
$(function(){
/*
$("#test2").on("click", function(){
$(this).css("backgroundColor", "orangered").text("클릭됨");
});
*/
// on메소드를 통해 이벤트 연결시
// 한 요소에 다중으로 이벤트걸기 가능함
$("#test2").on({"mouseenter":function(){
$(this).css("backgroundColor", "yellowgreen").text("마우스 올라감");
}, "mouseout":function(){
$(this).css("background", "yellow").text("마우스 빠져나감");
}, "click":function(){
// click이라는 이벤트 발생시 실행할 내용
// => 기존에 걸려있던 mouseenter, mouseout 이벤트 핸들러 제거
// off메소드 : 이벤트 핸들러 제거
$(this).off("mouseenter").off("mouseout").css("backgroundColor", "orangered").text("이벤트 제거됨");
}});
})
</script>
JavaScript
복사
방법3
•
$("상위요소선택자").on("이벤트명","하위요소선택자",function(){
선택된 상위요소 안에 존재하는 해당 하위요소에 해당 이벤트가 발생했을때 실행할 내용;
})
•
동적으로 만들어진 요소에도 동일한 이벤트를 적용시키고자 한다면 반드시 방법3 사용
◦
동적으로 만들어진 요소 : 처음에 문서 로딩시에는 없다가 나중에 새로이 만들어지는 요소
<div id="wrap2" style="border: 1px solid red;">
<h6>기존에 존재하는 요소</h6>
</div>
<script>
$(function(){
// 방법1. 이벤트메소드 => 동적으로 만들어진 요소에 이벤트 적용안됨
/*
$("#wrap2>h6").click(function(){
$("#wrap2").append("<h6>클릭으로 인해 동적으로 만들어진 요소</h6>");
});
*/
// 방법2. on메소드 => 동적으로 만들어진 요소에 이벤트 적용안됨
/*
$("#wrap2>h6").on("click", function(){
$("#wrap2").append("<h6>클릭으로 인해 동적으로 만들어진 요소</h6>");
})
*/
// 방법3. => 동적으로 만들어진 요소에도 이벤트 적용됨!!
$("#wrap2").on("click"," h6", function(){
$("#wrap2").append("<h6>클릭으로 인해 동적으로 만들어진 요소</h6>");
})
})
</script>
JavaScript
복사
•
방법1, 방법2는 이벤트가 적용 X → 클릭으로 인해 만들어진 요소를 클릭하면 새 요소가 만들어지지 않음
•
방법3은 이벤트가 적용O → 새 요소를 클릭하면 또다른 새 요소가 만들어짐
일회성 이벤트
•
이벤트를 딱 한번만 연결할 때 사용
•
$(선택자).one("이벤트명", function(){
해당 요소에 해당 이벤트 발생시 실행할 내용;
});
키보드 관련 이벤트
•
keydown / keypress : 키가 눌려질때 발생하는 이벤트
◦
keydown : 키보드의 모든 키가 눌려질때 발생됨
◦
keypress : 키보드의 펑션키, 기능키, 한글 제외한 나머지 키가 눌려질때
•
keyup : 키가 떼어질때 발생하는 이벤트
