맨 땅에 프론트엔드 개발자 되기

JS 동적으로 생성된 요소에 이벤트 바인딩 본문

코딩 공부 일지/JavaScript

JS 동적으로 생성된 요소에 이벤트 바인딩

헬로코딩 2022. 3. 21. 19:57
728x90

이벤트 바인딩(Event Binding)이란?

 

바인딩은 '연결하다, 묶다' 라는 뜻으로, 웹페이지 접속 시에 HTML 문서가 로드될 때 JavaScript에 작성된 대로 요소와 이벤트를 연결하는 것을 이벤트 바인딩이라고 한다. 브라우저는 요소와 이벤트를 바인딩하고 있다가 사용자가 요청하는 순간에 이벤트를 발동한다. (클릭, 마우스엔터, 스크롤 등)

이벤트를 바인딩 하는 방법에는 세 가지가 있다.

 

1. HTML 이벤트 핸들러

HTML 요소의 속성값으로 이벤트를 바인딩하는 방법이다.

<button id="btn" onclick="doSomething()">클릭</button>

버튼을 클릭하면 doSomething이라는 이벤트가 발동하도록 이벤트를 바인딩한 것이다.

HTML 문서에 JavaScript 코드를 작성하는 것은 보안 또는 다양한 이유에서 권장되지 않는 방법이다. 

 

2. DOM 이벤트 핸들러

요소에 이벤트를 바로 바인딩하는 방법이다.

const btn = document.getElementById('btn')
btn.onclick = () => {
	// 발동되는 내용 작성
}

여기서 '바로'라는 의미는 1대1로 바인딩한다는 의미로 이벤트 핸들러로 이벤트를 작성하면 같은 요소에 이벤트를 하나만 등록할 수 있다는 단점이 있다. 다른 이벤트를 이어서 작성하면 제일 밑에서 작성된 이벤트로 갱신된다.

 

3. DOM 이벤트 리스너

addEventListner 메소드를 이용해서 요소에 이벤트를 바인딩하는 방법이다. 이 방법을 사용하면 같은 요소에 여러 개의 이벤트를 추가할 수 있다.

const btn = document.getElementById('btn')
btn.addEventListner('click', () => {
	// 발동되는 내용 작성
})

 

동적으로 생성된 요소에 이벤트 바인딩

 

createElement로 요소를 생성하지 않고 직접 html을 작성해서 innerHTML이나 jQuery의 append()와 같은 방법으로 요소를 동적으로 생성할 경우에는 이벤트 바인딩이 되지 않는다.

이런 경우에는 동적으로 생성된 요소의 부모 요소 중 동적으로 생성되지 않은 요소에 이벤트를 바인딩 하면 된다. 

 

아래의 예시를 살펴보자.

<body>
  <div class="parent"></div>
  <button id="btn">클릭</button>
</body>
<style>
  .parent{
    width: 300px;
    height: 300px;
    background-color: #ddd;
  }
  .child{
    width: 100px;
    height: 100px;
    background-color: yellow;
  }
</style>
<script>
  const parent = document.querySelector('.parent')
  const btn = document.getElementById('btn')
  let html = `
    <div class="child">이 블럭은 초록색입니다.</div>
  `
  btn.addEventListener('click', () => {
    parent.innerHTML = html
  })

  // const child = document.querySelector('.child')
  // child.addEventListener('click', () => {
  //   child.style.backgroundColor = 'green'
  // })
  // => 이렇게 작성하면 요소를 찾을 수 없다고 나온다.

  parent.addEventListener('click', (e) => {
    e.currentTarget.children[0].style.backgroundColor = 'green'
  })

</script>

 

 

innerHTML을 이용해서 요소를 추가해준 뒤 그 요소에 이벤트 바인딩을 하면 이벤트 동작이 일어나지 않는다. 이벤트 바인딩이 되지 않기 때문이다. 대신 이런 경우에는 동적으로 생성되지 않은 부모 div 요소에 이벤트 바인딩을 해서 자식 div 요소를 찾아주어야 한다.

 

728x90
저작자표시

'코딩 공부 일지 > JavaScript' 카테고리의 다른 글

TDZ를 아시나요? - 에러 기록  (0) 2022.03.28
전개구문과 얕은 복사 & 깊은 복사  (2) 2022.03.22
Promise, Fetch, Async, Await 에 대해 알아보자  (0) 2022.03.15
Object is not iterable / 객체 순회 for in, Object.keys, value, entries - 에러 기록  (0) 2022.03.03
반복문 이후 비동기 처리 async & await 활용 - 에러 기록  (0) 2022.02.28
'코딩 공부 일지/JavaScript' Related Articles more