I’m gonna be an awesome professional

2 minute read

실행되는 코드에 응답을 하는 것

Event 속성 작성에는 세가지 방법이 있다

  1. html에 인라인으로 작성
  2. 자바스크립트에 작성

//속성이 메인 아니고 방법을 메인으로 소개하고 속성은 종류별로 따로

온클릭 ( onclick ) 속성

  • html안에 자바스크립트를 작성한 방법

image-20240427140458937

image-20240427140512804

단점이 많음(코드 길어짐, 따옴표 주의, 여러줄 쓸 경우 세미콜론으로 구분, 비효율적)

여러개의 버튼에 적용하려면 일일이 코딩을 해야함


image-20240427161018966

[ javascript ]

image-20240427160829199

image-20240427160807425

여러 버튼에 적용하려 할 때 일일이 코딩하지 않아도 됨



onmouseenter 속성

마우스 커서를 요소 위에 올릴 때 실행됨

image-20240427163242901

image-20240427163311213image-20240427163326798

=> 버튼 위에 마우스 커서를 올릴 때 마다 동작이 실행됨




addEventListener()

이 방법 많이 사용 함

이유는

  • 동일한 이벤트에 대해 두 개의 서로 다른 콜백함수를 지정할 수 있기 때문
  • 이벤트 작동 방식이나 콜백 발생 시간 등의 옵션을 추가할 수 있다(capture/once/passive/single)
addEventListener(이벤트 유형, 함수);

//type : 이벤트 유형
//listener : 함수 또는

image-20240429222140173

image-20240429222120793

removeEventListener()와 짝꿍

=======

이벤트와 ‘this’키워드

‘this’는 언제나 요소를 참조

========

키보드 이벤트

keydown : 자판을 누름

Keyup : 자판이 눌려있는 상태에서 뗄 때

[ key와 coded의 차이 ]

입력된게 무엇인지 알아내려면 key

key는 글자나 문자 키보드 자판을 눌러 생성되는 최종 값

code는 키보드의 실제 위치를 표시함으로 (그냥 shift가 아니라 왼쪽 또는 오른쪽에 있는 shift)

실제로 키보드에서 키가 눌렸는지 알기 위해 키의 위치를 알아내려면 code를 사용

image-20240430224001353

image-20240430223826834

image-20240430223842422

=> key: “e” 와 code: “KeyE”


image-20240430224148978

image-20240430224134627

image-20240430224210336

=> 순서대로 t, v, 오른방향 화살표, space 의 key와 code가 출력됨

==== 폼 이벤트 ====

html에서는 action속성 값을 어떤 값으로 저장하든 폼이 제출되었을 때 해당 위치로 데이터가 전송됨(브라우저의 페이지도 해당 위치로 이동)

Action : 데이터가 전송되는 위치인 url

그렇다면

폼을 사용해 데이터는 전송하되 페이지가 바뀌지 않게 하려면??(같은 페이지에서 폼 데이터를 처리)

Event.preventDefault() 메서드 사용

.preventDefault() : 특정 이벤트의 기본 동작이 수행되지 않도록 막아줌

폼 제출 이벤트만을 위한 메서드가 아니지만 제출 이벤트와 많이 쓰임(싱글 페이지 방식에 필요)

폼의 기본 동작인 action속성의 값에 따른 url로 이동하는 것을 막음

폼에서 데이터를 추출하는 방법

.value를 사용하면 해당 입력 요소에 든 값을 물어볼 수 있다

image-20240501002715644

image-20240501002726336

입력창에 값을 넣고 제출하면 아래의 목록에 추가되며 입력창의 내용은 사라지도록

Change 이벤트

input에 무언가를 입력하고 다른 곳을 클릭했을때 change이벤트가 발생함

입력의 값이 달라질 때마다 발생하게 하려면

input 이벤트를 써야 한다

무언가를 타이핑하는 순간 input이벤트가 발생

키보드 사용 말고 마우스로 붙여넣기 같은 동작을 해도 입력 이벤트 발생 (keydown은 마우스 클릭같은 동작은 포함하지 않음)

===

이벤트 버블링

중첩되어 있는 한 요소에 이벤트를 실행하려 할때 부모 요소에도 이벤트가 작성되었다면 해당 요소 뿐 아니라 부모 요소 이벤트도 같이 실행되는것을 이벤트 버블링이라 함

버블링 방지하는 방법

.stopPropagation() 메서드

===

이벤트 위임

하위 요소에 각각 개별적으로 이벤트를 추가하지 않고

부모 요소에 이벤트 리스너를 추가하여 하위 요소들의 이벤트를 관리한다

=> 추가로 생성되는 자식 요소에 새롭게 이벤트 리스너를 추가하지 않아도 됨

예를 들어 ul의 이벤트 target을 보면 하위 요소인 li임으로 li를 삭제하는 등의 이벤트를 추가하고 싶으면 ul에event.target.remove() 하면 됨 (여기서 event는 이벤트리스너의 인수인 함수의 인수로 들어가는 이벤트)

li요소만을 삭제해야 하기 때문에 console.dir(event.target)로 타깃을 확인하여

Event.target.nodeName === ‘li’ 일때 remove할것을 코딩해야함

Updated:

You may also enjoy