<목차로 돌아가기>
이벤트 처리기(event handler), 매핑, Listher 이라고도 불리는 과정입니다.
사용자의 어떤 동작에 의해서 발생하는 사건을 처리하는 것을 의미합니다.
사용자가 마우스를 클릭하거나, 마우스를 대상에 올려두거나, 키보드를 입력할때 처리하는 과정이라고 생각하쉬면 이해하기 쉬울 것 입니다.
메소드 |
기능 |
bind( ‘이벤트명’,’개체명’,함수명) |
요소에 이벤트를 등록하는 작업. |
unbind( 이벤트명, 함수명 ) |
요소에서 지정된 이벤트와 매핑된 모든 처리기들을 제거 |
one( 이벤트명,개체명,함수명 ) |
요소에 오직 한번만 실행되는 이벤트 처리기를 바인딩 |
trigger( 이벤트명,개체명) |
요소의 특정 이벤트를 트리거한다. |
올래 이제까지 이벤트 제어는 아래와 같이 했을 겁니다.
$("#menu").click(function(){}
하지만 html 처음에는 #가 없었습니다.
따라서 위의 소스는 알아먹지 못하는 경우가 있습니다.
사용하는 방법은 위의 메소드를 사용해서 사용하면 수월하게 사용 가능합니다.
$("#menu").bind('click',function(){}
이런식으로 처리할 수 있는 이벤트는 아래와 같습니다.
blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error
아래의 예제는 저번에 사용했던 예제입니다.
한번 누르고나서 그만 나와야되는데 계속 나오는 현상을 해결할때 사용할 수 있습니다.
Example
8lesson.zip
<html>
<head>
<style>
.bcolor{
background:#aaffaa;
color:#aa1111;
}
</style>
<script src="js/jquery-1.12.2.min.js"></script>
<script>
$(document).ready(function()//현재 문서가 준비되면 함수를 사용하겠다.
{
$(".link").children().first().click(function(){
//내가 좋아하는 것 클릭시 동작함
$(".menu1").children().first().addClass("bcolor");
//menu1클래스의 . 자녀중에 . 첫번째에. bcolor스타일을 적용해라
$(".menu2").children().slice(1,4).addClass("bcolor");
//menu1클래스의 . 자녀중에 . 두번째에서 4번째에. bcolor스타일을 적용해라
});
//$(".link").children().last().bind('click',function(){
$(".link").children().last().one('click',function(){
$(".menu1").children().first().removeClass("bcolor");
$(".menu2").children().slice(1,4).removeClass("bcolor");
var txt="<li>백곰콜라 <li>새벽햇살"
$(".menu3").children().last().append("<li>뽀콰리 ");
$(".menu3").children().last().after(txt);
});
});
</script>
</head>
<div class="link">
<a href="#">내가 좋아하는 것!</a>
<a href="#">내가 싫어하는 것</a>
<a href="#">음료 추가하기</a>
</div>
<body>
<ul class="menu1">
<li>과자
<li>쪼코파이
<li>코칼콘
<li>냥파링
</ul>
<ul class="menu2">
<li>아이스크림
<li>보썩뽜
<li>누구봐
<li>우주컵
<li>메롱바
</ul>
<ul class="menu3">
<li>음료
</ul>
</body>
</html>
|
|
bind, unbind에서 진화한 개념입니다.
on() 메서드의 경우 동적으로 생성될 개체나 요소에 대해서도 입벤트를 매핑시키는 메소드입니다.--
bind같은 경우는 새로 추가된 이벤트는 처리를 못하는데 on()은 새로 추가된 메서드도 처리가 가능합니다.
Example
8lesson (2).zip
<html>
<head>
<style>
.bcolor{
background:#aaffaa;
color:#aa1111;
}
</style>
<script src="js/jquery-1.12.2.min.js"></script>
<script>
$(document).ready(function()//현재 문서가 준비되면 함수를 사용하겠다.
{
//$(".link").children().last().bind('click',function(){
$(".link").children().first().one('click',function(){
var txt="<li>백곰콜라 <li>새벽햇살"
$(".menu3").children().last().append("<li>뽀콰리 ");
$(".menu3").children().last().after(txt);
$("ul").on('click','li',function(){alert("메세쥐")});
});
$(".link").children().last().one('click',function(){
$("ul").off('click');
});
});
</script>
</head>
<div class="link">
<a href="#">음료 추가하기</a>
<a href="#">알림박스 제거</a>
</div>
<body>
<ul class="menu3">
<li>음료
</ul>
</body>
</html>
이미 CSS에서도 hover 기능이 있습니다. 하지만 이걸 사용하는 이유는 hover이벤트를 실행하는 개체 말고도 다른 개체도 영향을 주고 싶을때 이 hover 메서드를 사용합니다.
예시)
$("li").hover(function()(마우스가 올라갈때 사용할 이벤트, 마우스가 나갈때 이벤트);
