일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 히든 스토리
- 과제의 분리
- sentry
- 수부타이
- 도파민형 인간
- try width resources
- 월칙
- 레퍼런스 복사
- 칭기즈칸의 위대한 장군 수부타이
- Container
- 모두가 기다리는 사람
- ESG
- 공헌감
- try-with-resources
- docker
- kubernetes
- 쿠버네티스
- node
- 이펙티브 자바
- CSS
- colllection
- 비메모리 자원
- 부자의그릇
- java
- HTML
- Infresh
- apache kafka
- 뉴 컨피던스
- 아웃풋법칙
- 참조 계수
- Today
- Total
Hi
키보드 이벤트이벤트 이름설명keydown키보드를 누를 때 발생합니다.keypress글자가 입력될 때 발생합니다.keyup키보드를 뗄 때 발생합니다. ex) 동적으로 글자 수를 세기$(document).ready(function() { $('textarea').keyup(function() { // 남은 글자 수를 구합니다. var inputlength = $(this).val().length; var remain = 150 - inputLength; // 문서 객체에 입력합니다. $('h1').html(remain); }); }); 1. 사용자가 키보드를 누릅니다. 2. keydown 이벤트가 발생합니다 3. 글자가 입력됩니다 4. keypress 이벤트가 발생합니다 5. 사용자가 키보드에서 손을 뗍니다..
마우스 이벤트이벤트 이름설명click마우스를 클릭할 때 발생합니다.dbclick마우스를 더블 클릭할 때 발생합니다.mousedown마우스 버튼을 누를 때 발생합니다.mouseup마우스 버튼을 뗄 때 발생합니다.mouseenter마우스가 요소의 경계 외부에서 내부로 이동할 때 발생합니다.mouseleave마우스가 요소의 경계 내부에서 외부로 이동할 때 발생합니다.mousemove마우스를 움직일 때 발생합니다.mouseout마우스가 요소를 벗어날 때 발생합니다.mouseover마우스를 요소 안에 들어올 때 발생합니다. ex)$(document).ready(function() { $('outer').mouseover(function() { $('body').append('MOUSEOVER'); }).mouse..
이벤트 연결 범위 한정범위를 한정하는 이벤트 연결 방식-> delegate 방식 "delegate 방식으로 이벤트를 연결합니다!" -> 이벤트 연결 범위를 한정하는 방법 on() 메서드는 현재 존재하는 태그에만 이벤트를 연결하기 때문에, 새로 생긴 태그에는 이벤트가 적용되지 않는다. 이러한 경우, 상위 태그에 이벤트를 연결하고 'h1 태그를 클릭했을 때'를 검출해야 합니다. Header $(document).ready(function() { $('#wrap').on('click', 'h1', function() { var length= $('h1').length; var targetHTML = $(this).html; $('#wrap').append('' + length + ' - ' + targetHT..
기본 이벤트와 이벤트 전달메서드 이름설명preventDefault()기본 이벤트를 제거합니다.stopPropagation()이벤트 전달을 제거합니다.$(document).ready(function() { $('a').click(function event) { $(this).css('background-color', 'blue'); event.stopPropagation(); // h1 클릭까지 되는걸 없애기. event.preventDefault(); // a의 본연의 링크 이벤트 기능을 없애기 }); $('h1').click(function() { $(this).css('background-color', 'red'); }); }); 위의 코드를 간단하게 return false; 로 구현할 수 있다.$(..
이벤트 강제 발생trigger() : 이벤트를 강제로 발생시킵니다. 두가지 형태$(selector).tirgger(eventName); $(selector).tirgger(eventName, data); ex)$(document).ready(function() { // 이벤트를 연결합니다. $('h1').click(function() { $(this).html(function(index, html) { return html + '별' }); }); // 1초마다 함수를 실행합니다. setInterval(function() { $('h1').last().trigger('click'); }); }); 두 번째 매개변수에 배열을 입력하면 데이터가 자동으로 이벤트 리스너에 순서대로 추가 전송됩니다.$(docum..
이벤트 객체이벤트 객체 속성설명event.pageX브라우저의 화면을 기준으로 한 마우스의 X 좌표 위치event.pageY브라우저의 화면을 기준으로 한 마우스의 Y 좌표 위치event.preventDefault()기본 이벤트를 제거합니다.event.stopPropagation()이벤트 전달을 제거합니다$(document).ready(function() { // 변수를 선언합니다 var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // 이벤트를 연결합니다. $(canvas).on({ mousedown: function(event) { // 위치를 얻어냅니다. var position = $(this).of..