ㅁ jQuery 방식으로도 특정 요소에 이벤트 핸들러를 연결할 수 있다.
지금까진 인라인 이벤트 모델 방식으로 무언가를 클릭했을 때 선언적 함수가 호출되게만 했었다.
ㅁ < 이벤트 메소드 >
- jQuery용 객체에 이벤트 핸들러를 부여하는 메소드.
- 주로 이벤트명이 곧 메소드명으로 되어있다.
- 특정 이벤트 대상이 되는 요소에 특정 이벤트 발생시 실행될 function을 부여할 수 있다.
ㅁ 이벤트 메소드 사용법
이벤트대상.이벤트메소드(이벤트핸들러);
(1) 익명함수
이벤트대상.click( function([evt]) {
실행내용;
} )
(2) 화살표 함수 // this 못 씀.
이벤트대상.click( (evt) => {
실행내용;
} )
ㅁ 예제 - 두 개의 h3 요소에 동일한 이벤트 핸들러 연결하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h3>1</h3>
<h3>2</h3>
<script>
$(document).ready(function(){
// (1) 자바스크립트 방식
const h3List = document.getElementsByTagName('h3'); // [h3, h3]
// 고전 이벤트 모델로 했는데 다른 두 방식도 당연히 된다.
for(let h3El of h3List) {
h3El.onclick = function() {
console.log('자바스크립트 방식으로 클릭됨');
}
}
})
</script>
</body>
</html>
- 1을 눌러도, 2를 눌러도 동일한 이벤트 핸들러가 호출된다.
- 선택된 각각의 요소에 클릭 이벤트 핸들러를 연결하고자 한다면 그 요소 객체에 직접적으로 접근해야 한다.
자바스크립트 방식은 어쩔 수 없이 반복문을 이용해야 요소에 순차적으로 접근할 수 있다.
- for of 문으로 각각의 인덱스에 담겨 있는 요소 객체를 매번 반환받는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h3>1</h3>
<h3>2</h3>
<script>
$(document).ready(function() {
// (2) jQuery 방식 - 익명함수 핸들러 동작
$('h3').click(function(){
console.log('jQuery 방식으로 클릭됨 - 익명함수 핸들러 동작');
})
})
</script>
</body>
</html>
- 1을 눌러도, 2를 눌러도 동일한 이벤트 핸들러가 호출된다.
- 선택된 요소 모두에 동일한 이벤트 핸들러를 부여하고자 한다면
jQuery 방식은 반복문을 돌릴 필요 없이 일괄적으로 접근 가능하다.
- click이라는 이벤트 메소드 사용.
click 메소드 내에서 내부적으로 선택된 요소들에 순차적으로 접근해서 function을 이벤트 핸들러로 등록해서 우리가 반복문을 돌릴 필요가 없다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h3>1</h3>
<h3>2</h3>
<script>
$(document).ready(function() {
// (2) jQuery 방식 - 익명함수 핸들러 동작
$('h3').click(function(){
console.log('jQuery 방식으로 클릭됨 - 익명함수 핸들러 동작');
})
// (2) jQuery 방식 - 화살표 함수 핸들러 동작
$('h3').click( () => {
console.log('jQuery 방식으로 클릭됨 - 화살표 함수 핸들러 동작');
})
})
</script>
</body>
</html>
- jQuery 방식으로 이벤트 메소드를 화살표 함수로 작성했다.
- click 이라는 이벤트 타입에 두 개의 이벤트 핸들러를 연결했다.
둘 중 하나만 작동하지 않고 둘 다 순차적으로 작동한다.
- 자바스크립트에서 고전 이벤트 모델 방식은 하나의 이벤트에 하나의 이벤트 핸들러만 연결 가능.
마지막에 작성한 이벤트 핸들러로 덮어씌워진다.
- 표준 이벤트 모델 방식은 하나의 이벤트에 여러개의 이벤트 핸들러 연결 가능.
- 인라인 이벤트 모델 방식은 <button onclick="firstHandler(); secondHandler();">Click me</button>
이렇게 하나의 onclick 속성에 여러 핸들러를 추가할 수 있다.
- 1을 눌러도, 2를 눌러도 동일한 이벤트 핸들러가 호출된다.
현재 클릭 이벤트가 발생한 요소가 궁금하다면 Event 객체의 target 속성에 접근하면 된다.
ㅁ 이벤트가 발생한 요소에 접근하기
<script>
$(document).ready(function() {
$('h3').click(function(){
console.log(window.event.target);
})
})
</script>
2를 클릭하면 콘솔에 이벤트 대상이된 요소가 출력된다.
- 다수의 요소에 동일한 이벤트 핸들러를 자주 부여할 예정이라 어떤 요소가 클릭됐는지를 파악할 수 있어야 한다.
- 브라우저를 이용하면서 어떤 이벤트가 발생할 때마다 이벤트 객체가 만들어진다.
그 이벤트 객체는 window 객체 내에 포함된다.
그래서 window.event 하면 현재 발생된 이벤트 정보를 가지고 있는 이벤트 객체에 접근 가능하다.
그때 알게 모르게 target이라는 속성이 있고 target 속성 내에 현재 발생된 이벤트의 대상이 담겨있다.
window.event.target
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h3>1</h3>
<h3>2</h3>
<script>
$(document).ready(function() {
$('h3').click(function(evt){
console.log(window.event.target);
console.log(evt.target);
console.log(this);
})
})
</script>
</body>
</html>
1누르면 3개, 2누르면 3개 출력됨.
- window.event로 이벤트 객체에 접근하기 귀찮다면 이벤트 핸들러가 실행될 때마다 이벤트 객체가 알게 모르게 전달된다.
그걸 받아주는 매개변수를 두게되면 이벤트 객체가 거기로 전달된다. evt.target
- 익명함수는 this를 써서 이벤트 핸들러 내에서 현재 이벤트가 발생한 요소를 가리킬 수 있다. this
(선언적 함수, 화살표 함수는 this가 다른걸 가리킨다. 화살표 함수 내에서는 this를 쓰지 않는게 좋다.)
ㅁ 현재 이벤트가 발생한 요소의 문구 및 스타일 변경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
<style>
.yellow { color:yellow; }
</style>
</head>
<body>
<h3>1</h3>
<h3>2</h3>
<script>
$(document).ready(function() {
$('h3').dblclick(function(evt){
$(window.event.target).html('더블클릭됨');
$(this).css('backgroundColor', 'red');
})
$('h3').mouseenter(function(evt){
$(window.event.target).addClass('yellow');
})
$('h3').mouseout(function(evt){
$(window.event.target).removeClass('yellow');
})
// hover 이벤트 메소드로 mouseenter + mouseout 같이 부여 가능
$('h3').hover(function(){
$(this).css('font-size', '60px');
}, function(){
$(this).css('font-size', ''); // 원상복구.
})
})
</script>
</body>
</html>
- html 메소드와 css 메소드는 jQuery용 메소드이므로 앞쪽에 제시된 객체가 jQuery용 객체여야 사용할 수 있다.
- window.event.target이나 this는 자바스크립트 방식으로 선택한 객체라 jQuery용 메소드를 쓸 수 없다.
자바스크립트 방식의 객체를 jQuery 방식 객체로 변환하면 된다. (jQuery wrapper)
$()로 묶으면 된다.
- 마우스가 진입하면 글자 색이 노란색이 되고, 빠져나가면 글자 색이 원상복귀된다.
- mouseenter와 mouseout 기능을 묵으면 그게 곧 hover 기능이다.
jQuery 측에서는 mouseenter와 mouseout을 조합해서 hover 같은 이벤트 효과를 주고자 한다면 이렇게 따로따로 이벤트 쓸 필요 없이 hover라는 이벤트 메소드만으로 두 개의 function을 쓸 수 있는 기능을 제공하고 있다.
- jQuery의 hover 메소드는 두 개의 이벤트 핸들러를 제시해야 한다.
첫번째는 mouseenter시 실행할 function, 두번째는 mouseout시 실행할 function이다.
- 이벤트 명과 동일한 이름의 이벤트 메소드를 이용해서 이벤트 핸들러를 제시해봤다.
사실 jQuery 측에서 더 자주쓰는 방법은 on 메소드를 이용하는 방식이다.
on 메소드를 이용해서도 특정 요소에 이벤트 핸들러 연결이 가능하다.
ㅁ < on 메소드 >
- 하나의 이벤트 타입에 여러개의 이벤트 핸들러 등록 가능 (표준 이벤트 모델의 특징)
그래서 jQuery에서도 이왕이면 on 메소드를 이용해서 연결하는 것이 좋다.
ㅁ on 메소드 사용법
(1) 정적요소
이벤트대상.on('이벤트타입', function(evt) {
실행내용;
})
(2) 동적요소
이벤트대상의상위요소.on('이벤트타입', '이벤트대상', function(evt) { // 화살표 함수도 가능.
실행내용;
})
ㅁ < off 메소드 >
- 등록된 이벤트를 제거하는 메소드
ㅁ off 메소드 사용법
이벤트대상.off('이벤트타입');
ㅁ 정적요소와 동적요소
- 정적요소 : 페이지 로드시 존재하는 요소.
- 동적요소 : 페이지 로드시에는 없다가 동적으로 만들어지는 요소. 보통 이벤트에 의해 만들어진다.
ㅁ 정적 요소에 on 메소드로 이벤트 부여
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>on 메소드</h2>
<h4 id="test1">마우스 클릭 및 올려보세요</h4>
<div id="wrap">
<h5>정적요소(페이지 로드시 존재하는 요소)</h5>
</div>
<script>
$(document).ready(function() {
// 동일한 요소에 2개의 이벤트 부여
$('#test1').on('mouseenter', function(evt) {
$(window.event.target).css('backgroundColor', 'gray').text('마우스올라감')
})
$('#test1').on('mouseout', function(evt) {
$(window.event.target).css('backgroundColor', 'violet').text('마우스빠져나감')
})
// 동일한 요소에 여러개의 이벤트를 부여하는 경우
$('#test1').on({
mouseenter : function(evt) { // 속성명과 속성값의 형식으로
$(evt.target).css('font-size', '50px');
},
mouseout : function(evt) {
$(evt.target).css('font-size', '');
}
})
// 이벤트 제거
$('#test1').on('click', function() {
$(this).html('hover 기능 제거됨')
.css('font-size', '')
.off('mouseenter')
.off('mouseout');
})
})
</script>
</body>
</html>
- 동일한 요소에 여러개의 이벤트를 부여하는 경우 on 메소드에 객체로 묶어서 전달 가능(css 메소드 때처럼)
- off 메소드도 메소드 체이닝 가능. 선택된 요소를 다시 반환해준다.
ㅁ on 메소드로 동적 요소를 생성하고, 생성한 동적 요소에 on 메소드로 이벤트 부여
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>on 메소드</h2>
<h4 id="test1">마우스 클릭 및 올려보세요</h4>
<div id="wrap">
<h5>정적요소(페이지 로드시 존재하는 요소)</h5>
</div>
<script>
$(document).ready(function() {
$('#wrap').on('click', function(evt) {
// 특정 요소를 클릭하는 순간 동적으로 요소를 생성해서 #wrap의 자손으로 추가
$('#wrap').append( $('<h5>동적요소(페이지 로드시 없던 요소)</h5>') );
})
$('#wrap h5').on('click', function(evt) {
alert('h5요소 클릭됨');
})
})
</script>
</body>
</html>
- "정적요소~"를 클릭하면 "동적요소~"가 #wrap의 자손으로 추가 된다.
한번만 추가되는게 아니고 누를 때마다 계속 추가된다.
- 그렇게 추가하고나서 '#wrap h5'에 'click' 이벤트를 부여했는데 "정적요소~"는 정상작동하지만 "동적요소~"는 작동하지 않는다.
- $(document).ready(function(){})으로 묶으면 코드가 페이지가 로드된 후에 바로 실행되기 때문이다.
그때는 #wrap 아래에 h5 요소는 정적요소 하나밖에 없다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>on 메소드</h2>
<h4 id="test1">마우스 클릭 및 올려보세요</h4>
<div id="wrap">
<h5>정적요소(페이지 로드시 존재하는 요소)</h5>
</div>
<script>
$(document).ready(function() {
$('#wrap').on('click', function(evt) {
// 특정 요소를 클릭하는 순간 동적으로 요소를 생성해서 #wrap의 자손으로 추가
$('#wrap').append( $('<h5>동적요소(페이지 로드시 없던 요소)</h5>') );
})
// 동적으로 만들어진 요소에는 반영되지 않음.
$('#wrap h5').on('click', function(evt) {
alert('h5요소 클릭됨');
})
// 동적으로 만들어진 요소에도 이벤트를 부여해야할 경우
$('#wrap').on('click', 'h5', function(evt) { // 'h5' 대신 '#wrap h5'하면 작동 안함.
alert('h5요소 클릭됨');
})
})
</script>
</body>
</html>
- "정적요소~"를 클릭하면 alert가 두 번 나오고, "동적요소~"를 클릭하면 alert가 한 번 나온다.
- $(document).ready(function(){})으로 묶고도
동적으로 만들어진 h5 요소들에도 이벤트를 부여하고 싶다면
on 메소드에 3개의 인자값을 전달해야 한다.
- 이때 두번째 인자값으로 이벤트대상의상위요소의 하위요소인 이벤트대상으로 'h5' 대신 '#wrap h5'하면 작동 안함.
- $('#wrap')으로 #wrap에 이벤트를 부여한 것이다.
#wrap 내의 h5 요소의 클릭 이벤트 발생시 이벤트 핸들러를 실행시키겠다.
그래서 동적으로 만들어진 h5 요소여도 항상 작동이 된다.
- 이벤트 대상의 상위요소는 반드시 페이지 로드시 존재하는 정적요소여야 한다.
- 이벤트 위임에서 "상위 요소"라는 용어는 상위 요소의 부모와 조상을 모두 포함한다.
- 상위요소를 제시하기 어려우면 document로 문서 전체에 걸어놔도 된다.
$(document).on('click', 'h5', function(evt) {
alert('h5요소 클릭됨');
})
$(document).on('click', '#wrap h5', function(evt) {
alert('h5요소 클릭됨');
})
둘 다 가능.
===========================================================================
ㅁ 연습문제 2개
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>연습1</h2>
<ul id='jjigae'>
<li class="menu">김치찌개</li>
<li class="menu">된장찌개</li>
<li class="menu">순두부찌개</li>
</ul>
<script>
$(document).ready(function(){
/*
문제1.
.menu 요소 클릭시 현재 클릭된 요소의 text값(=컨텐츠 영역값)이 alert로 띄워지도록
*/
})
</script>
<h2>연습2</h2>
<div id="hobby">
<input type="checkbox" name="hobby" value="reading" id="reading">
<label for="reading">독서</label>
<input type="checkbox" name="hobby" value="sports" id="sports">
<label for="sports">스포츠</label>
<input type="checkbox" name="hobby" value="movie" id="movie">
<label for="movie">영화</label>
<button id="hobby-btn">클릭</button>
</div>
<script>
$(document).ready(function(){
/*
문제1.
#hobby 내의 checkbox 요소 클릭시 (체크가 될 수도 있고 해제될 수도 있다.)
현재 클릭된 checkbox 요소가
checked 상태일 경우 가로,세로 길이를 30px로 변경, 그 뒤의 문구크기를 32px로 변경
checked 상태가 아닐 경우 원상복구 시키기
*/
/*
문제2.
#hobby-btn 클릭시 현재 checked 상태의 checkbox 요소들의 value값을 alert로 출력하기
만일 checked된 checkbox가 없을 경우 '선택된 취미가 없습니다.' 출력
*/
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>연습1</h2>
<ul id='jjigae'>
<li class="menu">김치찌개</li>
<li class="menu">된장찌개</li>
<li class="menu">순두부찌개</li>
</ul>
<script>
$(document).ready(function(){
/*
문제1.
.menu 요소 클릭시 현재 클릭된 요소의 text값(=컨텐츠 영역값)이 alert로 띄워지도록
*/
$('#jjigae > .menu').on('click', function(evt) { // 클래스이름이니까 menu 앞에 . 붙어야 함.
alert( $(evt.target).html() );
})
})
</script>
<h2>연습2</h2>
<div id="hobby">
<input type="checkbox" name="hobby" value="reading" id="reading">
<label for="reading">독서</label>
<input type="checkbox" name="hobby" value="sports" id="sports">
<label for="sports">스포츠</label>
<input type="checkbox" name="hobby" value="movie" id="movie">
<label for="movie">영화</label>
<button id="hobby-btn">클릭</button>
</div>
<script>
$(document).ready(function(){
/*
문제1.
#hobby 내의 checkbox 요소 클릭시 (체크가 될 수도 있고 해제될 수도 있다.)
현재 클릭된 checkbox 요소가
checked 상태일 경우 가로,세로 길이를 30px로 변경, 그 뒤의 문구크기를 32px로 변경
checked 상태가 아닐 경우 원상복구 시키기
*/
$('#hobby > :checkbox').on('click', function(evt) {
if( $(window.event.target).is(':checked') ) { // checked 앞에 콜론(:) 필요
$(this).css({
width : '30px',
height : '30px',
});
$(this).next().css('font-size', '32px'); // 같은 부모를 가지면 형제다.
}
else {
$(this).css({
width : '',
height : '',
});
$(this).next().css('font-size', ''); // 'fontSize'도 가능.
// next('label')을 사용하여 체크박스 다음에 있는 label 요소를 정확히 선택할 수도 있다.
}
})
/*
문제2.
#hobby-btn 클릭시 현재 checked 상태의 checkbox 요소들의 value값을 alert로 출력하기
만일 checked된 checkbox가 없을 경우 '선택된 취미가 없습니다.' 출력
*/
$('#hobby-btn').on('click', function() {
if( $('#hobby :checkbox').is(':checked') ) {
// alert( $('#hobby :checkbox').is(':checked').val() );
// is 메소드는 boolean 타입으로 반환함. 요소가 아니라.
// alert( $('#hobby :checkbox').filter(':checked').val() );
// 여러개가 선택되었는데 val 메소드를 사용하면 맨 처음 하나의 값만 가져옴.
for(let i=0; i<$('#hobby :checkbox').filter(':checked').length; i++) {
alert( $('#hobby :checkbox').filter(':checked').eq(i).val() );
}
// jQuery에 일반 반복문 사용.
// jQuery로 선택했는데 여러개인 경우, length 속성 사용가능.
// 근데 이 방식은 alert가 checked된 갯수만큼 띄워진다.
}
else {
alert('선택된 취미가 없습니다.');
}
})
})
</script>
</body>
</html>
- type="radio"인 input 요소들을 같은 name으로 묶어줘야 여러개 중에서 하나만 선택된다.
(이 문제는 checkbox라 직접적인 관련은 없다)
- 후손 선택자 등으로 선택시 클래스 이름을 가져오려면 앞에 . 붙어야 함.
- 상태 선택자는 앞에 콜론(:) 붙는다.
- 같은 부모를 가진 요소들은 형제이기 때문에 일반형제 메소드( nextAll, prevAll, siblings ), 인접형제 메소드( next, prev ) 사용 가능하다.
- next('label')을 사용하여 체크박스 다음에 있는 label 요소를 정확히 선택할 수도 있다.
※ 선택자로 여러 요소를 선택하고 is 메소드를 사용 하는 경우
$('#hobby :checkbox').is(':checked')
- 항상 이런 비교를 하거나 특정 값 하나를 반환하려할 때는 애초에 요소 선택 자체를 하나만을 선택하게금 작성하는 것이 가장 좋다.
- 다수의 요소가 선택됐을 경우 jQuery용 메소드를 쓰면 이때 채택되는 요소는 메소드마다 다르다.
val() 메소드는 다수의요소.val()하면 그 중 첫번째 요소만이 선택돼서 반환된다.
- is() 메소드는 다수의요소.is()하면 대상을 다 선택해서 본다.
선택된 다수의 요소들 중 해당 선택자에 만족하는게 하나라도 있다면 true, 그게 아니면 false를 반환한다.
ㅁ 선생님 방식
$('#hobby-btn').on('click', function() {
let result = '';
//console.log($('#hobby :checkbox:checked'));
let count = $('#hobby :checkbox:checked').length;
if(count == 0){
result = '선택된 취미가 없습니다.';
}else{
for(let i=0; i<count; i++){
result += $('#hobby :checkbox:checked').eq(i).val() + ' ';
}
}
alert(result);
})
- 하나의 alert에 checked된 모든 value 값들이 출력됨.
ㅁ < one 메소드 >
- 한번만 동작하는 이벤트를 작성할 수 있다.
- 사용법
이벤트대상.one('이벤트타입', function() {
실행내용;
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>one 메소드</h2>
<button id="one-time">한번만 실행됨</button>
<script>
$(document).ready(function() {
$('#one-time').one('click', function(){
alert('처음이자 마지막 이벤트 실행')
})
})
</script>
</body>
</html>
- id가 "one-time"인 요소에 클릭 이벤트 발생시 실행할 이벤트 핸들러.
그런데 on이 아니라 one으로 하면 이 이벤트 핸들러는 한번만 작동되고 사라진다.
ㅁ < trigger 메소드 >
- 특정 요소의 이벤트를 강제로 실행시키는 메소드
- 사용법
이벤트대상.trigger('이벤트타입');
- 그런데 trigger 메소드를 쓰지 않고도 가능하다.
해당 요소의 이벤트 메소드를 호출하면 강제로 이벤트를 실행시킬 수 있다.
이벤트대상.이벤트메소드();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>trigger 메소드</h2>
<button id="trigger">#test1 클릭</button>
<!-- 이 버튼을 클릭하는 순간 id가 test1인 요소에 클릭 이벤트를 강제로 실행시킨다. -->
<h4 id="test1">피난안내도</h4>
<script>
$(document).ready(function() {
$('#test1').on('click', function(){ // '피난안내도'를 클릭하면 커진다.
$(this).css('font-size', '32px');
})
$('#trigger').on('click', function() {
// $('#test1').trigger('click');
$('#test1').click(); // trigger 메소드 안 쓰고도 가능하다.
})
})
</script>
</body>
</html>
