개발공작소
728x90
반응형
article thumbnail
[JS] JQuery(제이쿼리) 선택자와 Event.target(이벤트 타겟)을 활용하여 스타일을 변경해보자.
FrontEnd/JavaScript 2022. 5. 24. 22:47

옛날 신입이 시절에 정리해야지 라고 생각하고 임시저장 해놨던 걸 이제서야 정리해본다. 그때 구현했던 게, 클릭한 텍스트에 fontWeight를 두껍게 주는 기능이었는데.. 해당 코드는 현재 VueJs의 클래스바인딩으로 변경되었으니, 올려도 되겠지 싶어 그냥 올린다. 1년이 넘어 기억은 안나지만, 대충 아래와 같은 기능을 구현하려고 짠 코드 같음.. 1. 제이쿼리 선택자를 활용한 CSS 변경 2. Event.target을 활용한 Style 변경 그래서 오늘은 2가지에 대해 알아보자. 그럼 바로 시작해보자. testFile.html 클릭해보세요 이 html을 가지고 연습해보자. 1. 제이쿼리 선택자를 활용한 CSS 변경 기본문법 $([클래스명 or 아이디명]).css([propertyName], [value..

article thumbnail
이벤트(event) 정리
기타 2021. 7. 31. 18:03

이벤트(Event)란 "어떤 사건"을 의미한다. 어떠한 동작으로 인해 일어나는 사건이며 이벤트는 크게 다음과 같이 3개로 나뉜다. 1. event target 2. event type 3. event handler 다음 샘플 버튼을 통해 각 이벤트를 알아보겠다. 위의 이벤트 테스트 버튼은 클릭하면 '하하하' 라는 팝업창이 뜨는 단순한 코드이다. 여기에서 event target이란 실제로 클릭되어 이벤트가 발생하는 요소 이벤트 테스트이고, event type은 클릭으로 이벤트가 발생되었기 때문에 click Event이다. event handler는 이 이벤트로 인해 동작되는 코드인 alert("하하하"); 이다. 즉 event target은 실제 이벤트가 일어날 객체, event type은 이벤트의 종류 ..

728x90
반응형