[JavaScript] 🎁addEventListener한 요소에 여러개 이벤트 넣는 법

✔ 협업을 위한 개발가이드로 팀원을 위해 작성한 글입니다.

⛏ 방법1: addEventListener

👀 원리파악

한줄요약: 인라인방식과 프로퍼티 방식은 요소 하나당 하나의 이벤트 타입 리스너만 등록 가능하기 때문에 addEventListener 방식을 쓰자!

(참고) 이벤트를 주는 방법

<방법1> 인라인 방식: 이벤트를 이벤트 대상의 HTML태그에 직접 속성으로 지정하는 방법

<input type="checkbox" onclick="getCheck()" value="button" />
<script>
  getCheck(){
  	...
  }
</script>

<방법2> 프로퍼티 리스너 방식: 이벤트 대상에 해당하는 객체에 '.'을 찍어 프로퍼티로 이벤트를 등록하는 방식

<input type="checkbox" value="button" class="check"/>
<script>
    document.querySelector(.check).onclick = function(){ 
  	...
  }
</script>

<방법3> 이벤트 객체 방식: ie8 이하 버전에서는 이벤트 객체를 핸들러의 인자가 아니라 전역객체의 event 프로퍼티로 제공하기 때문에 문제가 발생하며, target 프로퍼티도 지원하지 않아 추천하지 않는 방식

<input type="checkbox" value="button" class="check"/>
<script>
    document.querySelector(.check).onclick = function(event){ 
  	...ie8이후 버전에서는 event.target.value 사용할 수 있음
  }
</script>

✨<방법4> addEventListener 방식✨
(하나의 이벤트 대상에 복수의 동일 이벤트 타입 리스너를 등록가능)

<input type="checkbox" value="button" class="check"/>
<script>
const check = document.querySelector(.check)
check.addEventListener(click, getCheck(event)){
	...
});
check.addEventListener(click, getCheck(event)){
	...
});
</script>

🎃 필요한 개념

1. [javascript]이벤트 리스너 - addEventListener
   참고1: https://nevertrustbrutus.tistory.com/310
   참고2: MDN

2. [css] 선택자
   참고: https://webty.tistory.com/60

3. [javascript] document 객체의 메소드
   참고: http://www.tcpschool.com/javascript/js_dom_document

    //여러개에게 이벤트 줄 때: 
    document.querySelectorAll(선택자)
    //하나에게만 이벤트 줄 때:
    document.querySelector(선택자)

4. [jquery 문법]
   참고: https://soft91.tistory.com/9

5. 이벤트 종류(Type) - click, scroll...
   참고1: http://milooy.github.io/TIL/JavaScript/event.html
   참고2: MDM

예제 (buy.html buy.css buy.js)

❗jquery 섞여 있음 주의! jquery 쓸 땐 head에 cdn추가하기

<script src="https://code.jquery.com/jquery-3.6.3.min.js"
    integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" 
	crossorigin="anonymous"></script>

아래 코드는 크게보면 input에 대해 이벤트가 두개있다!
document.querySelector('#bid_input').addEventListener('input', e=>{...})
document.querySelector('#bid_input').addEventListener('blur', e=>{...})

<input type="number" maxlength="10" placeholder="희망가 입력" 
       autocomplete="off" id="bid_input" style="display:none">
<script>
//input: input/textarea요소 값이 변경될 때
document.querySelector('#bid_input').addEventListener('input', e=>{
    let str_price=e.target.value;
    // 숫자 외 입력 불가 (숫자도 10글자까지)
    if (str_price.length > e.target.maxLength){
        e.target.value = str_price.slice(0, e.target.maxLength);
    }
    // .price_now에 has_danger has_warning추가
    if(str_price < 30000 ){
        pricebox.classList.add('has_warning')
        pricebox.classList.add('has_danger')
        errormsg.style.display="block"
    } else {
        pricebox.classList.remove('has_warning')
        pricebox.classList.remove('has_danger')
        errormsg.style.display="none"
    }
});
//blur: 요소에 포커스가 벗어났을 때 이벤트 발생
document.querySelector('#bid_input').addEventListener('blur', e=>{
    let str_price=e.target.value;
    // 30000원 미만 입력시 내용이 지워진다.
    if(str_price < 30000 ){
        e.target.value='';
    }
    // 1000원 단위가 아닐 시 다른 곳 클릭할때 1000원 미만단위 버림
    if(str_price%1000 !=0){
        e.target.value=Math.floor(str_price/1000)*1000;
    }
    // 즉시 구매값보다 비싸게 부르면 즉시구매로 넘어간다.
    if(price_now < str_price){
        $(".header_main .title_txt").html("즉시 구매하기");
        $("#bid").removeClass("on");
        $("#now").addClass("on");
        $(".price_now").removeClass("active_input");
        $("#bid_input").hide();
        $("#now_price").show();
        $(".price_now_title").html("즉시 구매가");
        $(".deadline_info_area").hide();
        $(".step-1 .btn_confirm a").html("즉시 구매 계속");
        $(".step-1 .btn_confirm a").removeClass("disabled")
    }
    //1000단위 버림은 같이 일어나기 때문에 뺀다 
  	//=> 그래야 한번 focusout 되었을때 한번에 처리됨
      if((str_price >= 30000) &&(price_now > str_price)){
          $(".step-1 .btn_confirm a").removeClass("disabled")
      }
})
</script>