퍼블리싱 아카이브

javascript는 위에서부터 한줄씩 해석한다. 그래서 script 코드는 관행상 body 태그가 끝나기 직전에 작성한다. HTML을 전부다 읽어들인 뒤 코드를 실행하려면, 아래 코드를 사용하자. //jquery $(document).ready(function(){//코드} //javascript vanilla document.addEventListener('DOMContentLoaded', function(){//코드} load 이벤트 리스너 :를 사용하면 해당 파일이 로드됐는지 확인할 수 있다. document.querSelector('img').addEventListener('load',function(){ //이미지 로드시 실행할 코드 }

window.addEventListener('scroll',function(){ //스크롤 할 때마다 이벤트 실행 console.log(window.scrollY); //유저가 스크롤 바를 얼마나 내렸는지 표시 // console.log(window.pageYOffset);(호환성 보완) console.log(window.scrollX); //가로스크롤 표시 window.scrollTo(0,100); //강제스크롤(window.scrollTo(x,y)) 해당 위치로 window.scrollBy(0,100); //현재 위치에서 y축으로 100px 스크롤 하기.(현위치 기준 이동) }); jquery $(window).on('scroll',function(){ $(window).scrollTop(); //현..

1. 마우스 이벤트 click : 마우스 버튼을 클릭했을 때 dbclick: 마우스 버튼을 더블클릭했을 때 mousedown: 마우스 버튼을 눌렀을 때 mouseup: 누르고 있던 마우스 버튼을 놓았을 때 mousemove: 마우스 커서를 움직였을 때 mouseenter: 마우스 커서를 HTML 요소 안으로 이동했을 때(버블링X) mouseover: 마우스 커서를 HTML 요소 안으로 이동했을 때 (버블링O) mouseleave: 마우스 커서를 HTML 요소 밖으로 이동했을 때(버블링x) mouseout: 마우스 커서를 HTML 요소 밖으로 이동했을 때(버블링O) 버블링에 대한 것은 아래 링크를 참고 https://ko.javascript.info/bubbling-and-capturing 버블링과 캡처링..

이벤트 객체 이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다. 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다. 이벤트 target 속성 See the Pen 이벤트 객체 by breeghty (@breeghty) on CodePen. target 속성은 DOM 요소 노드이다. 이벤트를 발생시킨 DOM 요소를 가리킨다.

See the Pen eventhandler by breeghty (@breeghty) on CodePen.

addEventListener 메서드 사용하기 //html Alert Box close! //script id가 close인 요소를 클릭했을 때, 다음 함수가 실행된다는 의미이다. onclick을 직접 사용하는 대신 이렇게 이벤트 리스너를 사용할 수도 있다. 이렇게 onclick이나 addEventListener를 사용하여 이벤트를 실행시키는 메서드가 이벤트 핸들러이다. 이벤트 핸들러를 등록하는 방식에는 세가지가 있다. 1. 어트리뷰트 방식 Click Me! 2. 이벤트 핸들러 프로퍼티 방식 Click Me! 주의) eventlistener에 함수를 대입할 때 $button.onclick = clickEvent ; (o) $button.onclicke=clickEvent(); (x) 3. addEvent..