기본 뼈대
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex03.html</title>
</head>
<body>
<h1>jQuery Event</h1>
<input type="button" value="버튼" id="btn1" class="btn">
<input type="button" value="버튼" id="btn2" class="btn">
<input type="button" value="버튼" id="btn3" class="btn">
<script src="../asset/js/jquery-1.12.4.js"></script>
</body>
</html>
🔻BOM, DOM 이벤트 등록 방법
BOM
btn.onclick = function() {}
DOM
btn.addEventListener('click', function() {});
🔻jQuery 이벤트 함수
1. 전용 이벤트 함수
객체.이벤트함수(콜백함수)
$('#btn1').click(function() {
alert('btn1');
});
2. 범용 이벤트 함수
객체.on(이벤트명, 콜백함수)
$('#btn2').on('click', function() {
alert('btn2');
});다양한 이벤트를 on 으로 접근한다.
이벤트함수는 BOM, DOM에서 사용하는 것과 같다.
3. 이벤트 제거
전용 함수, 범용 함수의 이벤트를 제거한다.
$('#btn2').off('click');
🔻클릭 이벤트 비교
버튼 3개에 이벤트 추가한다.
DOM
const list = document.querySelectorAll('.btn');
for (let i=0; i<list.length; i++){
list[i].onclick = function() {
alert(event.target.value);
}
}
jQuery
$('.btn').click(function() {
alert(event.target.value);
})제이쿼리로 찾은 반환값에 클릭이벤트를 적용하면 자동으로 btn클래스에 속한 객체에 click 이벤트를 적용하는 루프를 돈다.
반복문 작성이 생략되어 작업 속도가 빨라진다.
'WEB > jQuery' 카테고리의 다른 글
| [jQuery] 스크롤 이벤트 : 프로세스 바 만들기 (0) | 2023.10.16 |
|---|---|
| jQuery로 CSS 조작 (0) | 2023.10.16 |
| [jQuery] jQuery 함수 (0) | 2023.10.13 |
| [jQuery] jQuery 설치 (0) | 2023.10.13 |
