jQuery] eventListener 추가하기 / on( ) / loop 하는 법

자바스크립트에서의 eventListener 어떻게 써줄까?

 

타겟.eventListener("이벤트","함수")

자바스크립트에서 h1 클릭시 글자색을 바꾸고 싶다면

아래처럼 코드를 작성해야 했다. 

바닐라 자바스크립트

하지만 제이쿼리에서는 eventListener를 써주지도 않는다.

타겟 뒤에 바로 어떤 event할 지 써주고 나서,

함수를 바로 써주면 된다.

jquery

 

 

자바스크립트에서 eventListener + for loop 조합을 제이쿼리에서는 어떻게 할까?

 

eventListener + for loop 조합이었을 때

button 5개에 eventlistener가 적용될려면 

 

querySelectorAll("button")[i]를

for loop으로 돌려서 하나씩 적용되도록 하였었다. 

 

하지만 jquery에서는 선택된 모든 아이템에 css가 적용된다.

 

 

input안에 text넣으면 console에서 그 text 나오게 하기 

html에서 text 박스로 된 input을 하나 만든다. 

 

 

인풋이 비번인 경우에도 알 수 있다

 

 

 

 

 

hi 글자를 타자치는 텍스트로 바로 바뀌게하기 

document는 큰따옴표 안해줌. 

전체 문제에 eventlistener 적용 시키고 나서 

들어오는 텍스트를 h1으로 가도록 한다. 

 

 

 

on("이벤트종류", 함수)

evenListener를 사용하는 방법이 위에서 한 것처럼

.click() .keydown으로 이벤트를 바로 적어주는 것 말고 

on을 사용하는 방법이 있다.

 

 

이벤트 종류보기 

https://api.jquery.com/category/events/

https://developer.mozilla.org/en-US/docs/Web/Events#event_listing