yongyong-e
[jQuery] 이벤트 연결하기 본문
1) click 이벤트
- jQuery에서는 기본적으로 click 함수를 사용하여 클릭 이벤트를 발생시킵니다.
- 이벤트를 발생시킨 객체를 찾을때는 (event.currentTarget 및 this 키워드)를 사용할 수 있습니다.
- 이벤트를 연결할 때 이벤트 객체의 data 속성을 사용하여 다양하게 클릭 이벤트를 식별할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery 이벤트 연결하기</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<h1>Hello World</h1>
<script>
// 방법 1.
$("h1").click(function (event) {
alert(event.currentTarget)
alert(this)
alert("Click A")
})
// 방법 2.
$("h1").click("Hello", function (event) {
alert(event.data + " Click B")
})
</script>
</body>
</html>
2) on 형태의 이벤트
<!DOCTYPE html>
<html>
<head>
<title>jQuery 이벤트 연결하기</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<h1>Hello World</h1>
<script>
$("h1").on({
click: function () {
$(this).html("click")
},
dblclick: function () {
$(this).html("dblclick")
},
mouseenter: function () {
$(this).html("mouseenter")
}
})
</script>
</body>
</html>
3) 마우스 이벤트 정리
| click | 노드를 마우스 포인터로 눌렀다가 떼었을 때에 발생 |
| dblclick | 노드를 더블 클릭 했을 때에 발생 |
| hover | mouseenter와 mouseleave 이벤트를 한번에 bind |
| mousedown | 영역에 마우스를 눌렀다가 떼었을 때에 발생 |
| mouseenter | 노드에 마우스가 진입했을 때에 발생(자식노드에서는 이벤트를 감지 못함) |
| mouseleave | 마우스가 노드에서 벗어났을 때에 발생 |
| mousemove | 노드 영역에서 마우스를 움직였을 때에 발생 |
| mouseout | 노드에서 마우스 포인터가 떠났을 때에 발생 |
| mouseover | 노드 영역에서 마우스를 올려놓았을 때 발생 (내부노드까지 이벤트를 감지) |
| mouseup | 마우스 포인터를 노드에 올려놓고 마우스 버튼을 눌렀다 떼었을 때에 발생 |
| toggle | click 이벤트에 핸들러를 바인딩하고 클릭할 때마다 실행될 함수들을 차례대로 실행 |
'웹 프로그래밍 > jQuery' 카테고리의 다른 글
| [jQuery] 문서 객체 다루기 - 3 (0) | 2019.09.04 |
|---|---|
| [jQuery] 문서 객체 다루기 - 2 (0) | 2019.09.04 |
| [jQuery] 문서 객체 다루기 - 1 (0) | 2019.09.04 |
| [jQuery] 문서 객체 생성 방법 (0) | 2019.09.04 |
| [jQuery] 라이브러리 사용 설정 (0) | 2019.09.04 |
'웹 프로그래밍/jQuery' Related Articles
more
Comments