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

Java Script/Jquery

CodeMia 2021. 9. 5. 04:06

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

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

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

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

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

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

함수를 바로 써주면 된다.

자바스크립트에서 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으로 가도록 한다.

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

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

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

이벤트 종류보기

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