jQuery는 HTML 페이지 이벤트 처리에 유용하다.

 

jQuery에서 대부분의 DOM 이벤트들은 동등한 jQuery 메소드를 가진다.

클릭 이벤트는 아래와 같이 작성한다.

 

$("p").click( );

 

다음 단계는 아래와 같다.

 

$("p").click(function(){

// action 작성

});

 

$(document).ready( ) 메소드는 문서가 완전히 로드 되었을 때 함수를 실행하도록 허용한다.

 

Click( ) 메소드는 마우스 클릭 시 실행 된다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});
</script>
</head>
<body>
 
<p>If you click on me, I will disappear.</p>
<p>disappear 2</p>
<p>disappear 3</p>
 
</body>
</html>
 
cs


dblClick( )은 더블 클릭 시 이벤트가 발생한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).hide();
    });
});
</script>
</head>
<body>
 
<p>If you click on me, I will disappear.</p>
<p>disappear 2</p>
<p>disappear 3</p>
 
</body>
</html>
 
cs


mouseenter() 메소드는 마우스의 포인터를 갔다 대면 작동한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#p1").mouseenter(function(){
        alert("approached mouse pointer");
    });
});
</script>
</head>
<body>
 
<p id="p1">Enter this paragraph.</p>
 
</body>
</html>
cs

결과 : 마우스를 갔다 대면 alert() 실행



mouseleave( ) 마우스 포인터를 갔다 대었다가 밖으로 빠져나올 때 실행 된다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#p1").mouseleave(function(){
        alert("approached mouse pointer");
    });
});
</script>
</head>
<body>
 
<p id="p1">Enter this paragraph.</p>
 
</body>
</html>
cs



mousedown( ) : 마우스의 왼쪽, 오른쪽, 가운데 등 어떤 것을 클릭하든 실행 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#ppp").mousedown(function(){
        alert("Mouse down over ppp!");
    });
});
</script>
</head>
<body>
 
<p id="ppp">This is a paragraph.</p>
 
</body>
</html>
 
cs


mouseup( ) : 마우스의 왼쪽, 오른쪽, 가운데 등 어떤 것을 클릭 후 떼었을 때 실행된다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#ppp").mouseup(function(){
        alert("Mouse down over ppp!");
    });
});
</script>
</head>
<body>
 
<p id="ppp">This is a paragraph.</p>
 
</body>
</html>
 
cs


저작자표시 비영리 변경금지 (새창열림)

'문돌이의 IT > jQuery' 카테고리의 다른 글

jQuery Effects 제이쿼리 효과 - hide and show  (0) 2017.08.08
jQuery event 제이쿼리 이벤트 (2)  (0) 2017.08.07
다양한 jQuery 셀렉터들 (Selector)  (0) 2017.07.27
jQuery 셀렉터 (Selector)  (3) 2017.07.26
jQuery 기초 및 특징  (0) 2017.07.25

+ Recent posts

티스토리툴바