|
표현식 |
설명 |
|
click() |
클릭 시 발생 |
|
dblclick() |
더블 클릭 시 발생 |
|
mouseenter() |
마우스가 특정 영역으로 들어왔을 경우 발생 |
|
mouseleave() |
마우스가 특정 영역 밖으로 나갓을 경우 발생 |
|
mousedown() |
마우스 버튼 눌럿을 경우 발생 |
|
mouseup() |
마우스 버튼 떼었을 경우 발생 |
|
hover() |
마우스 오버 시 발생(mouseenter 와 mouseleave를 결합한 형태), on 메소드로 사용할 수 없다. |
|
focus() |
포커스가 들어왔을 시 발생 |
|
blur() |
포커스를 잃었을 경우 발생(웹 접근성 상 사용 금지) |
|
on() |
특정 요소에 이벤트를 추가(한 요소에 여러 이벤트를 추가 하고 싶을 경우) off 메소드를 사용해서 이벤트 제거 가능 |
사용예제
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</script>
<style>
div{
width: 300px;
height: 300px;
}
#mousezone{
background-color: antiquewhite;
float: left;
}
#overzone{
background-color: burlywood;
float: left;
}
</style>
</head>
<body>
<button id="btn">이벤트 제거</button>
<p id="1">클릭하면 글자 색상이 바뀐다.</p>
<p id="2">클릭하면 글자 색상이 바뀐다.</p>
<p id="3">클릭하면 글자 색상이 바뀐다.</p>
<p id="4">클릭하면 글자 색상이 바뀐다.</p>
<div id="mousezone">마우스 존</div>
<div id="overzone">오버 존</div>
아이디:<input type="text"><br>
비번:<input type="password">
</body>
<script>
$("input").on("focus",function(){
$(this).css("background-color","blue");
});
$("input").on("blur",function(){
$(this).css("background-color","pink");
});
$("#mousezone").mouseenter(function(){
$(this).text("마우스가 들어왔다.");
$(this).css("background-color","pink");
});
$("#mousezone").mouseleave(function(){
$(this).text("마우스가 나갔다.");
$(this).css("background-color","yellow");
});
$("#mousezone").mousedown(function(){
$(this).text("마우스가 눌린 상태.");
$(this).css("background-color","black");
});
$("#mousezone").mouseup(function(){
$(this).text("마우스 업.");
$(this).css("background-color","red");
});
$("#overzone").hover(function(){
$(this).text("마우스가 들어왔다.")
$(this).css("background-color","blue")
},function(){
$(this).text("마우스가 나감");
$(this).css("background-color","green")
});
$("p").on("click",function(){
//this.html("내용이 바뀐다."); //자바스크립트 객체여서 제이쿼리 함수를 사용하지 못한다.
$(this).html("내용이 바뀐다."); //제이쿼리 객체여서 함수 사용가능
console.dir(this); //js 객체
console.log($(this)); //제이쿼리 객체, 똑같은 내용이지만 제이쿼리 객체는 자바스크립트 객체를 배열로 한겹 감싼 형태이다.
$(this).css("color","red");
});
$("p").on("dblclick",function(){
$(this).css("color","blue");
});
$("#btn").click(function(){
$("p").off("dblclick"); //이벤트 제거
});
</script>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
요약
$(선택자).이벤트(함수())
선택자: 아이디, 클래스이름, 태그 등
이벤트: click, hover, dblclick 등
함수: 이벤트 발동시 실행할 것
자바스크립트 객체와 제이쿼리 객체는 다른다.
자바스크립트 객체로는 제이쿼리 함수 사용 불가능 함으로 주의해서 살펴야한다.
제이쿼리 객체는 자바스크립트 객체를 배열로 한겹 싼 형태이다
'J QUERY' 카테고리의 다른 글
| 제이쿼리 요소 또는 속성 가져오기 및 변경하기 (0) | 2019.11.29 |
|---|---|
| 제이쿼리 Hide & Show & toggle (0) | 2019.11.29 |
| 제이쿼리 기본 Selector (0) | 2019.11.28 |
| 제이쿼리(J QUERY) 란? (0) | 2019.11.28 |
