728x90 반응형 JavaScript17 JavaScript] 장시간 움직임이 없는 경우 로그아웃 처리 2023. 8. 30. JavaScript] Event delegation 출처 : https://javascript.info/event-delegation Capturing, bubbling은 강력한 event handling 패턴인 event delegation의 구현을 가능하게 해준다. 많은 elements를 비슷한 방식으로 handle할 때, 각각 handler를 할당하는 것이 아닌 공통 ancestor에만 하나의 handler를 할당할 수 있다. handler에서 우리는 event.target으로 event가 실제로 어디서 발생하는지 알 수 있다. Ba-Gua diagram을 예로 들어보자. HTML은 다음과 같다. Bagua Chart: Direction, Element, Color, Meaning Northwest Metal Silver Elders ... ... .. 2022. 12. 9. Web APIs - Console API Console API는 디버깅을 실행할 수 있는 기능들을 제공한다. 다양한 브라우저에서 구현하고 있으며, 일관된 동작을 위해 Console API spec이 지정되었다 https://console.spec.whatwg.org/ 사용법 console object는 window object의 property로, window.console 또는 console로 접근이 가능하다. console.assert(expression, message) : expression이 false일때 message를 write한다. console.assert(document.getElementById("demo"), "You have no element with ID 'demo'"); console.clear() : console.. 2022. 12. 5. JavaScript] Event Bubbling and capturing 출처 : https://javascript.info/bubbling-and-capturing If you click on EM, the handler on DIV runs. handler는 에 할당 되었지만, 내부의 또는 어느 것을 클릭해도 동일하게 실행된다. Bubbling bubbling 원칙은 단순하다. 한 element에 event 발생 시, 맨처음 element에 있는 handler가 실행되고 그 다음 부모 그 다음 부모로 실행된다. FORM > DIV > P로 중첩된 elements가 있고, 각자 handler가 있다. FORM DIV P p를 클리갛면 p -> div -> form 순으로 alert을 볼 수 있다. 대부분의 event는 bubble이다. 예외로 focus event는 bubb.. 2022. 11. 23. JavaScript] DOM events, Event handler, addEventListener 출처 : https://javascript.info/introduction-browser-events '이벤트'란 무언가 발생했다는 신호이다. Mouse events click contextmenu mouseover/mouseout mousedown/mouseup mousemove Keyboard events keydown/keyup Form element events submit focus Document events DOMContentLoaded - DOM전체 생성 시 CSS events transitioned - CSS-animation 종료 시 Event handlers event에 반응하기 위해, handler(event발생 시, 실행하는 함수)를 할당한다. handler할당에 여러 방법이 있다.. 2022. 11. 22. JavaScript] Coordinates (element 좌표) 출처 : https://javascript.info/coordinates elements를 이동시키기 위해서, 우리는 좌표에 익숙해져야 한다. 대부분의 JavaScript 함수들은 두 좌표 시스템 중 하나를 사용한다. Relative to the window - position:fixed와 유사하다. window top/left edge로부터 계산한다. 이러한 좌표를 clientX/clientY로 나타낸다. Relative to the document - position:absolute와 유사하다. document top/left edge로부터 계산한다. 이러한 좌표를 pageX/pageY로 나타낸다. page를 맨처음으로 스크롤할때 window의 top/left corner는 document의 top/.. 2022. 11. 17. 이전 1 2 3 다음 728x90 반응형
