유블로그

$("#result").click(function(e) { $("#log").prepend(` px: ${e.pageX}, py: ${e.pageY}, x: ${e.offsetX}, y: ${e.offsetY} `); });

let id = setTimeout(함수, 시간-밀리세컨드) : 한 번만 호출 let id = setInterval(함수, 시간-밀리세컨드) : 반복적 호출 - 공통점 = 특정 시간 이후에 지정된 함수를 호출 - 예약된 실행을 취소하기 clearTimeout(id) clearInterval(id) ex) - 5초 뒤에 한 번만 log 출력 setTimeout(function() { console.log('안녕! 오늘은 금요일!!'); }, 5000); // 5초 뒤에 function() 실행해라! - 1초 간격으로 log 출력, 5초 뒤에 중단 let id = setInterval(function() { console.log('안녕! 오늘은 금요일!!'); }, 1000); // 1초 간격으로 funct..

클릭

방법 1 : .on(이벤트종류, 수행할 함수) jQuery 이벤트 방식 이 방법으로 할 경우 추가로 만들어지는 element( 위 예시에서는 h2) 에 대해 이벤트 처리를 할 수 없다. (기존에 원래 있던 h2에만 이벤트 처리) 방법 2 : $(element).on(이벤트종류, 추가될element, 수행할 함수) 추가하기 !!클릭!! 방법1과 다르게 btn2를 눌러서 id가 list인 div 에 새로 추가 되는 h2까지 이벤트 처리가 된다.

방법 1: element에 onclick="" 으로 함수 호출 버튼1 방법 2: document.getElement~~ 로 elment 받아와서 함수 정의 버튼1 만약 방법1과 방법2를 동일한 element에 주면 밑에 나온 function이 호출된다!! 방법 3: element.addEventListener(이벤트종류, 수행할함수) 버튼1 방법 3은 방법1이나 방법2와 중복으로 이벤트처리해도 둘 다 처리됨! 동일한 element에 여러 .addEventListener("click" ~~~ 해도 다 적용됨 + 다른 element 에 동일한 이벤트 처리 버튼1 버튼2 btn2를 눌러도 fn1호출이라고 console에 출력됨

이벤트 설명 onclick 마우스로 element 클릭 했을 때 ondbclick 마우스로 element 더블 클릭 했을 때 onmouseup 마우스로 element에서 마우스 버튼 올렸을 때 onmousedown 마우스로 element에서 마우스 버튼 눌렀을 때 onmouseenter 마우스를 움직여서 elemetn 밖에서 안으로 들어올 때 onmouseleave 마우스를 움직여서 elemetn 안에서 밖으로 나갈 때 onkeypress 키가 눌러졌을 때 onkeydown 키보드를 누르는 순간 onkeyup 키가 올려질 때 onsubmit form이 전송될 때 onreset 입력 form이 reset될 때 onblur input과 같은 요소 등에서 입력 포커스가 다른 곳으로 이동할 때 onfocus i..

초기 화면 + document.getElementById("div1").style.color = "orange"; 이런 식으로 간단하게 style 을 줄 수도 있다.

id, name, 태그이름, class 등으로 dom element들을 검색할 수 있다. content1 content2 content3 content4