-
[JQuery] eventVScode/JQuery 2022. 9. 9. 14:50
1. 이벤트 연결
-기존 (자바스크립)의 이벤트 연결은 태그 안의 onclick 등의 속성을 넣고 자바스크립트 함수를 연결해서 실행되게 하는 방식이라면 제이쿼리는 직접선택자와 이벤트 이름을 연결하고 익명함수로 동작을 정의해서 실행되게 함
-on()
-사용 형태
1) $(selector).on(eventName,function(event){});
-selctor에 eventName이 발생하면 function(event){} 함수 실행
-$(function(){//h1에 'click'이 발생하면 function(event){} 실행
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="script/jquery-3.6.0.js"></script> <script type="text/javascript"> $(function(){ $('h1').on('click',function(){ // h1 태그가 여러개인 상태에서 $('h1') 선택자를 사용하면, // 그 여러개의 h1 태그가 동시 선택되고, // 그들에게 인덱스(번호)가 자동으로 부여됨 // 몇번재 h1 태그를 클릭했는지 아래와 같이 얻어낼 수 있음 // $('h1').on('click',function(){}); // -> $('h1').click(function(){}); 간략하게 사용 가능 var k=$(this).index(); // $(this): 현재 클릭된 h1 태그 $(this).html(function(index,html){return html+k;}); // index: 클릭된 h1의 번호, // html: 그 h1 태그가 갖고 있는 현재 내용 // html에 k를 이어붙이기 한 내용이 리턴되면 // 그 값은 html() 함수의 값으로 사용됨 }); }); </script> </head> <body> <h1>header-0</h1> <h1>header-1</h1> <h1>header-2</h1> </body> </html>
2) $(selector).on(object);
-두가지 이상의 이벤트와 그에 따른 실행 함수 지정
$(function(){ $('h1').on( // 'click', function(){} { mouseenter: function(){$(this).addClass('reverse')}, mouseleave: function(){$(this).removeClass('reverse')} // h1에 마우스가 올라가면 reverse 클래스를 추가, // 밖으로 나가면 클래스 제거 } ); });
3) $(selector).hover(function(event){},function(event){});
-hover(): mouseenter 이벤트와 mouseleave 이벤트를 동시에 연결
$(function(){ $('h1').hover( function(event){$(this).addClass('reverse');}, function(event){$(this).removeClass('reverse');} ); }); // on 대신 hover, 이벤트 이름 안 쓰고 익명함수인 컴파로 구분하여 표현
2. 이벤트 제거
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="script/jquery-3.6.0.js"></script> <script type="text/javascript"> $(function(){ $('h1').on('click', function(){ $(this).html('CLICK'); // 내용을 CLICK 으로 변경 $(this).off(); // 이벤트 제거 }); }); </script> </head> <body> <h1>header-0</h1> <h1>header-1</h1> <h1>header-2</h1> </body> </html>
3. 매개 변수 context
-$(selector,context)
-selector가 적용하는 범위를 한정
-특정 부분의 선택자를 선택하고 싶을 때 사용하는 매개변수
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="script/jquery-3.6.0.js"></script> <script type="text/javascript"> // 아래의 내용은 클릭된 div 안의 h1과 p를 따로 선택자로 쓰고자할 때 // 자손 선택자를 사용하고자 하는데, // 부모가 this라면... $('this h1')라고 쓰면 안됨 // this가 ''안에 들어가는 순간 this로 사용이 안됨. // 그냥 문자('this')로 인식 $(function(){ $('div').click(function(){ // div 중 클릭된 div를 this로 표현 // -> 아래는 h1 중 click된 div 속 h1을 저장함 var header=$('h1',this).text(); // h1들 중 클릭된 div 내부의 h1 내용(text) var paragraph=$('p',this).text(); // p들 중 클릭된 div 내부의 p 내용(text) var k=header+":"+paragraph; $('body').append($('<h1>'+k+'</h1>')); }); }); </script> </head> <body> <div><h1>header1</h1><p>paragraph1</p></div> <div><h1>header2</h1><p>paragraph2</p></div> <div><h1>header3</h1><p>paragraph3</p></div> </body> </html>
4. 이벤트 강제 발생
-$(selector).trigger(eventName);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="script/jquery-3.6.0.js"></script> <script type="text/javascript"> $(function(){ $('h1').click(function(){ $(this).html(function(index,html){return html+'>';}); }); // 클릭된 div 태그의 내용에 '>'를 추가 setInterval(function(){ $('h1').last().trigger('click'); // $('h1').last().click(); },1000); // 3초마다 마지막 div를 클릭한 것처럼 // 내용에 '>'를 추가 }); </script> </head> <body> <h1>Start: </h1> <h1>Start: </h1> <h1>TRIGGER</h1> </body> </html>
5. 마우스 이벤트
-click: 마우스 클릭할 때 이벤트 발생
-dbclick: 마우스 더블클릭할 때 이벤트 발생
-mousedown: 마우스 버튼을 누를 때 이벤트 발생
-mouseup: 마우스 버튼을 뺄 때 이벤트 발생
-mouseenter: 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생
-mouseleave: 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생
-mousemove: 마우스가 움질일 때 발생
-mouseout: 마우스가 요소를 벗어날 때 발생
-mouseover: 마우스가 요소 안에 들어올 때 발생
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="script/jquery-3.6.0.js"></script> <script type="text/javascript"> $(function(){ $('.outer').mouseover(function(){ $('body').append('<h3>mouseOver</h3>'); }).mouseenter(function(){ $('body').append('<h3>mouseEnter</h3>'); }); }); </script> </head> <body> <div class="outer"> <div class="inner">mouse controll</div> </div> </body> </html>
6. 키보드 이벤트
-keydown: 키보드가 눌러질 때 발생
-keypress: 글자가 입력될 때 발생(한글지원 안됨)
-keyup: 키보드가 떼어질 때 발생
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="script/jquery-3.6.0.js"></script> <script type="text/javascript"> $(function(){ $('textarea').keyup(function(){ var inputlegth=$(this).val().length; // textarea에서 글자를 얻어 글자갯수 지정 // val(): text(), html()과 비슷한 함수로 // 주로 input type 태그들을 대상을 할 때 사용함. // textarea는 input 태그와 동일한 용도로 // 많이 사용되므로 val()로 값을 얻음. var remain=10-inputlegth; // 글자수 계산 $('h1').html(remain); // 남은 글자 표시 if(remain>=0) $('h1').css('color','black'); // 양수는 검정 else $('h1').css('color','red'); // 음수는 빨강 }); }); </script> </head> <body> <div><p>지금 내 생각을</p><h1>10</h1> <textarea cols="70" rows="5"></textarea> <!-- <input type="textarea" value=""> 이 사용이 태그의 특성상 불편함으로 시작태그와 끝태그를 사용함 --> </div> </body> </html>
'VScode > JQuery' 카테고리의 다른 글
[JQuery] menu생성, animate (0) 2022.09.09 [JQuery] button, effect (0) 2022.09.09 [JQuery] DOM (0) 2022.09.09 [JQuery] 속성/필터선택자, 배열 (0) 2022.09.09 [JQuery] 인접관계선택자 (0) 2022.09.09