자바스크립트
-
setTimeout에서 this사용하는 방법!Knowledge/javascript 2019. 8. 26. 13:35
자바스크립트 코드를 객체 리터럴 패턴으로 정리하던 중 이상한 현상이 발생했다. 객체안에 무한슬라이드의 다음 슬라이드 가져오는 함수를 집어넣었는데 setTimeout안에서는 객체내의 프로퍼티에 this로 접근할 수 없었던 것 말로하자니 두루 뭉술해서 간략화한 코드를 붙여보자면 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var slideObj = { // 이미지 UL imageUl : document.querySelector("ul"), getNextSlide : function (){ setTimeout(function() { // 201초 후( 넘어가는 듯한 트랜지션 효과가 모두 끝난 후 )에 xPosition 적용 this.imageUl.style.transition = "0s";..
-
자바스크립트로 리스트에 이벤트 다는 방법 ( Event delegation / 이벤트 위임 )Knowledge/javascript 2019. 8. 12. 21:51
먼저 자바스크립트로 이벤트를 걸기 위해선 어떻게 해야할까? querySelector나 getElementBy를 활용해 이벤트를 걸 대상을 찾고 addEventListener를 활용해 원하는 이벤트를 걸어주면 된다 코드로 보면 아래와 같다 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 자바스크립트 이벤트 #target { width: 100px; height: 100px; background: blue; }; document.querySelector("#target").addEventListener("click",function(){ alert("테스트"); }); 그렇다면 같은 클래스명을 공유하는 여러개의 엘리먼트에 한번에 이벤트를 ..