저번 글에선 이벤트를 작성하는 방법에 대해 알아보았다. 이번에는 자주 사용되는 여러 이벤트들을 알아보려고 한다.
특정 엘리먼트를 보이게 하거나 숨기는 이벤트이다. 괄호 안에 밀리초나 fast, slow와 같은 예약어를 넣어주어 해당 이벤트의 속도를 조절할 수 있다.
<h1>숨기기, 보이기</h1> <p> <button id="btnhide">문장 숨기기</button> <button id="btnshow">문장 표시하기</button> </p> <div>안녕하세요, jquery 입니다.</div>
$('btnhide').on('click', function(){ $('div').hide(2000) // 2000ms의 속도로 사라지기 }); $('btnshow').on('click', function(){ $('div').show('fast'); // slow도 사용가능 });
show와 hide를 한 가지 동작으로 제어할 수 있는 이벤트이다. 역시 괄호 안에 예약어를 넣어주어 속도를 조절할 수 있다.
<h1>toggle()</h1> <p> <button id="btnToggle">문장 토글</button> </p> <div>안녕하세요. 제이쿼리입니다.</div>
$('#btnToggle').on('click', function(){ $('div').toggle(2000); });
역시 괄호 안에 예약어를 넣어주어 속도를 조절할 수 있다.
요소가 서서히 보여지거나 서서히 사라지는 애니메이션이다.
요소가 위로 쓸려 올라가거나 아래로 쓸려 내려가는 애니메이션이다.
마우스를 클릭할 때 발생하는 이벤트이다. 자바스크립트를 이용하여 버튼을 클릭하면 p단 안에 글자가 출력되도록 한다.
<button id="btn">버튼</button>을 클릭 또는 더블클릭하세요 <p></p>
$('btn').on('click',function(){ $('p').text('클릭 되었습니다.'); });
$('#btn').on('dblclick', function(){ $('p').text('더블클릭 되었습니다.'); });
키보드 클릭할 때 발생하는 이벤트이다. 자바스크립트를 이용하여 버튼을 클릭하면 p단 안에 글자가 출력되도록 한다.
단, 첫 번째 이벤트에는 shift나 delete와 같이 특수 키를 입력했을 때는 반응이 없도록 하고, 두 번째 이벤트에는 특수키에도 반응하도록 한다.
<input type="text"/> 입력란에 키보드를 입력하세요 <h1>jQuery 키보드 이벤트 1</h1> <p id="text1"></p> <h1>jQuery 키보드 이벤트 2</h1> <p id="text2"></p>
keypress는 특수키를 눌렀을 때는 반응이 없다.
let i = 0; $('input').on('keypress', function(){ $('#text1').text((++i) + '번 키보드가 눌렸습니다.'); });
keydown은 특수키를 눌렀을 때도 반응을 한다. 특수키는 shift나 enter, tab, delete와 같은 키이다.
let j = 0; $('input').on('keydown', function(){ $('#text2).text((++j) + "번 키보드가 눌렸습니다.'); });
.css 뒤에 해당 css의 속성이름을 적어주면, 해당 속성에 대입되어있는 값이 반환된다.
$('요소').css('속성이름'); // 값이 반환됨 $('.content').css('display'); // none
.css 뒤에 해당 css의 속성이름을 적고, 콤마 이후 해당 속성에 대입될 값을 적어주면 속성값이 적용된다. 기존 다른 값이 대입되어있었다면 새롭게 적어준 값으로 변경된다.
$('요소').css('속성이름', '값'); // 속성이름에 값을 대입 $('.content').css('display', 'none'); // style="display:none;"
css 클래스의 적용여부는 hasClass로 알 수 있다. 해당 메서드는 불린으로 값을 리턴해준다.
addClass는 클래스를 적용할 때 사용하며, 두 개 이상의 클래스는 공백으로 구분시켜준다.
removeClass는 클래스를 제거해주며 역시 두 개 이상의 클래스는 공백으로 구분시켜준다.
toggleClass는 다른 toggle 기능들과 동일하게 이벤트 한 번에 클래스를 적용하고 제거할 수 있도록 해준다.
focus()는 함수로서 사용할 경우 강제로 포커스를 지정하는 기능을 하지만, 이벤트로서 사용할 경우 포커스가 들어갔음을 감지하는 기능을 한다.
$('셀렉터').focus(function(){ // 포커스가 이뤄졌을 때 해당 셀렉터에 발생할 이벤트 })
blur() 함수는 포커스와 반대로 요소에서 포커스가 빠져나왔음을 감지한다.
$('셀렉터').blur(function(){ // 포커스가 빠져나갔을 때 해당 셀렉터에 발생할 이벤트 })
값을 갖는 속성이다
값을 갖지 않는 속성이다
disabled, checked, selected와 같이 값이 존재하는 것이 아닌 있냐 없냐(boolean)와 같은 상태로만 파악할 수 있다.
change 이벤트를 사용하면, 해당 셀렉터의 변화가 생기는 순간 이벤트를 발생시킨다. 텍스트를 입력하는 요소일 경우 내용이 변경되고 포커스가 빠져나올 떄 이벤트를 발생시킨다. 체크박스나 라디오 버튼, 드롭다운의 경우 선택상태가 변경된 즉시 이벤트가 발생한다.
$('셀렉터').change(function(){ // 변화가 일어날 때 발생할 이벤트 })