TIL(20210706) - onclick / addEventListener

Notice

Recent Posts

Recent Comments

Link

github

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

DevLog

TIL(20210706) - onclick / addEventListener 본문

🤔 TIL(Today I Learned)

TIL(20210706) - onclick / addEventListener

Seungjae Lee 2021. 7. 6. 16:57

🎁 Daily

이벤트 객체 학습
DOM으로 HTML 조작하기

🤔 Learned

onclick에 직접 할당하는 것과 addEventListener의 차이

onclick

document.getElementById('test').onclick = () => {
    alert('hello! I'm onclick');
}

addEventListener

document.getElementById('test').addEventListener('click',()=>{
    alert('hello! I'm addEventListener');
},false);

두 가지 방법이 있지만 일반적으로 addEventListener 방법을 쓰는 것이 장점이 더 많다.

addEventListener 장점 :

여러 개의 이벤트를 호출할 수 있다.

var element = document.getElementById('Test');
element.onclick = function () { alert('Test #1'); };
element.onclick = function () { alert('Test #2'); };

위와 같이 여러 개의 onClick 메서드를 구현했다고 가정하자. 실제로 element를 '클릭'하면 'Test #2'만 보일 것이다.

이처럼 onClick 메서드는 첫 번째 이벤트를 두 번째 이벤트가 overwrite 함으로써 첫 번째 이벤트('Test #1')가 구현되지 못하게 한다.

element.addEventListener('click', function() {alert('Test #1')}, false);
 
element.addEventListener('click', function() {alert('Test #2')}, false)

하지만 AddEventListener는 두 이벤트가 전부 구현된다.

addEventListener 장점 :

bubbling, capturing을 설정할 수 있다.

addEventListener("type", 이벤트 리스너(함수), false(버블링) / true(캡쳐링) ) - default 값은 false(버블링).

addEventListener('click', functionName, false);

Onclick 장점 :

우선 브라우저의 호환성 면에서, Onclick 메서드는 모든 브라우저와 버전에서 호환되는데 비해
AddEventListener는 IE 6,7,8 에서는 호환되지 않는다는 점이 다르다.
구 버전의 IE에서도 동작하기를 원하거나, 호환성에 신경 쓰고 싶지 않다면 OnClick 메서드를 사용하는 것이 좋다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>이벤트 객체</title>
  </head>
  <body>
    <button>아메리카노</button>
    <button>카페라떼</button>
    <script>
      let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.

      let btnAmericano = menus[0];
      let btnCaffelatte = menus[1];

      btnAmericano.onclick = handleClick;
      btnCaffelatte.onclick = handleClick; // 이상으로 for 문으로 충분히 구현할 수 있는 내용입니다.
      btnAmericano.addEventListener("click", eventClick);
      btnCaffelatte.addEventListener("click", eventClick);

      function handleClick() {
        // 아래의 빈 칸(____)을 채우세요.
        let currentMenu = event.target.textContent; // TODO
        console.log(currentMenu + "를 클릭하셨습니다.(onclick)");
      }
      function eventClick() {
        let currentMenu = event.target.textContent; // TODO
        console.log(currentMenu + "를 클릭하셨습니다.(eventListener)");
      }
    </script>
  </body>
</html>

🌈 Tomorrow

고차함수
계획표대로 진행하기

저작자표시

'🤔 TIL(Today I Learned)' 카테고리의 다른 글

TIL(20210708) - JSX규칙 (0)	2021.07.08
TIL(20210707) - 고차함수 (0)	2021.07.07
TIL(20210705) - DOM (0)	2021.07.06
TIL(20210703) (0)	2021.07.03
TIL(20210702) - Spread/Rest, 구조분해(Destructing) (0)	2021.07.02