이벤트4 자바스크립트[기초] 마우스 커서의 좌표 구하기 https://api.jquery.com/event.pagex/ [참고] https://api.jquery.com/event.pagey/ [참고] https://tamagotch.tistory.com/44 [자바스크립트 마우스 이벤트 4가지 좌표 차이 참고] e.pageX : 브라우저상 마우스 커서의 x축 좌표 e.pageY : 브라우저상 마우스 커서의 y축 좌표 2022. 4. 21. 자바스크립트[기초] e.preventDefault() https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault [참고] e.preventDefault() 란? a 태그나 submit 태그들의 고유 동작들을 중단 시킨다. 페이지를 이동시킨다거나 form 안에 있는 input 등을 전송한다던가 그러한 동작이 있는데 e.preventDefault 는 그 동작을 중단시킨다. 그래서 만약 클릭 이벤트가 실행 됐을 때 페이지가 새로고침 되거나 이동하는 것을 막고 color를 바꾸는 등 다른 행위를 하고 싶을 때 e.preventDefault()를 사용해준다 2022. 4. 21. 자바스크립트[기초] e.stopPropagation() https://developer.mozilla.org/ko/docs/Web/API/Event/stopPropagation [참고] https://ko.javascript.info/bubbling-and-capturing [버블링& 캡처링에 대한 참고] event.stopPropagation() 란? 자식 노드에서 이벤트가 일어나면 부모 노드로 버블링 돼서 부모 노드도 같이 실행 되게 되는데 이때 부모 노드로 버블링 되는 것을 막고 자식 노드에서만 특정한 기능을 구현해야 할 때 부모 노드로 버블링 되는 것을 막는 e.stopPropagation() 이벤트 객체 기능이다 2022. 4. 21. 자바스크립트[기초] onclick 이벤트에 함수 대입 시 주의점 | 함수 호출과 함수 대입 시 다른점 input tag에 onclick 속성을 줘서 함수를 호출하고 있는 코드이다. /** 원본 코드 **/ script는 script 대로 html은 html 대로 깔끔하게 구분하고 싶어서 input tag onclick 속성에 함수를 호출하는 대신 btnPrint.onclick = printResult; 함수를 대입해주었지만 이 코드는 btnPrint를 찾을 수 없다며 오류가 나게 되는 코드이다 그 이유는 function() 블럭은 함수가 실행되기 전까지 건드려지지 않는 부분이지만 script 태그 안에 부분은 브라우저 실행 시 거치게 되는 부분이다 그래서 script tag 안 function() 블럭 밖에 있는 btnPrint.onclick = printResult; 코드는 실행 되게 되는데 프로그래밍.. 2022. 4. 19. 이전 1 다음 728x90