코딩정비소 코딩정비소

event.preventDefault? event.stoppropagation? 자바스크트립에서 이벤트 바인딩 시에 많이 보이던 함수였다. 저 둘을 이전부터 많이 사용되었고, 앞으로도 많이 사용될 거라 생각되어. 나중에 시간 되면 분석해보기로 했었던 찰나. 오늘 개발하면서 저 둘의 개념을 혼동하여, 30분 동안이나 삽질을 했다. 이참에 다시 정리해보기로 했다. event? 먼저 event가 뭘까? 모든 동작은 event를 받아서 동작한다고 생각하면된다. 이벤트에도 종류가 있는데 tag별로 이벤트가 다르다. form event, click event, 특정 이벤트가 발생하면, 이벤트를 구독(참조)하여 동작을 지시하는 방식으로 되어있다. 쉽게 말해서 발생한 이벤트를 코드에 알려줘서, 동작하는 것을 이벤트라고..

목표 JS 클래스 추가/삭제를 알아야하는 이유 JS 클래스 추가/삭제 하는 방법 JS 클래스 추가/삭제를 알아야하는 이유 실무에서는 UI 개발자가 UI를 class 형식으로 전달하여 사용하기 때문 특정 상황에 class를 추가, 삭제하여 UI를 변경 해야하기 때문 JS 클래스 추가 - 클래스 추가시에 사용 // 클래스 추가 div.classList.add('good', 'love'); JS 클래스 삭제 - 클래스 삭제시에 사용 // 클래스 삭제 div.classList.remove('love'); JS 클래스 덮어쓰기 - 기존에 있는 클래스를 다지우고 새로 등록시에 사용 // 클래스 덮어쓰기 div.className = 'good'; JS 특정 클래스 변경 - on/off로 클래스 변경시에 많이사용 //..

오늘은 간단한 key event에 대해 이해해보는 시간을 가져보고자 합니다. key event는 지금 제가 타이핑하고 있는 이 순간에도 일어나고 있습니다. ㅎㅎ 즉 타이핑을 할때마다 key event가 발생하게 됩니다. 총 keydown, keyup, keypress 이렇게 총 3개의 이벤트가 발생하게 되는데요. 각각의 이벤트가 언제 발생하는지 알아봅시다. 첫째로 keydwon key + down : keyboard가 down 되었을 때. 즉 키보드가 눌렀을 때 실행되는 이벤트입니다. 둘째로 keypress key + press : key가 press 되었을때, 즉 글자가 눌렀을 때 실행되는 이벤트입니다. keydown이벤트와 동일하게 키보드가 눌렀을때 실행되지만, 큰 차이점이 있습니다. keydown이..