이벤트 처리기를 단순화하는 사고

이벤트는 사용자 클릭, 키보드 초점 링크 및 양식 텍스트 변경에 응답하는 데 사용됩니다. JavaScript를 처음 배우기 시작했을 때 복잡한 이벤트 청취자를 썼습니다. 최근에 코드의 양과 리스너 수를 줄이는 방법을 배웠습니다.

간단한 예로 시작하겠습니다 : 몇 가지 드래그 가능한 블록. 우리는 사용자에게 드래그 한 컬러 사각형을 보여주고 싶습니다.

<div draggable="true">
    아르 자형
  </div>
  <div draggable="true">
    와이
  </div>
  <div draggable="true">
    G
  </div>
<p>블록을 드래그하십시오</p>

직관적 인 접근

JavaScript 이벤트를 처음 배우기 시작했을 때 각 요소에 대해 별도의 이벤트 리스너 기능을 작성했습니다. 이것은 시작하는 가장 쉬운 방법이기 때문에 일반적인 패턴입니다. 각 요소가 특정 동작을 갖기를 원하므로 각 요소에 특정 코드를 사용할 수 있습니다.

 document.querySelector ( '#red'). addEventListener ( 'dragstart', evt => {
  document.querySelector ( '#dragged'). textContent = 'draged red';
});

document.querySelector ( '#Yellow'). addEventListener ( 'DragStart', evt => {
  document.querySelector ( '#dragged'). textContent = 'Draged Yellow';
});

document.querySelector ( '#green'). addEventListener ( 'DragStart', evt => {
  document.querySelector ( '#dragged'). textContent = 'dragged green';
});

중복 코드를 줄입니다

이 예제의 이벤트 리스너는 매우 유사합니다. 각 함수에는 일부 텍스트가 표시됩니다. 이 중복 코드는 도우미 기능으로 붕괴 될 수 있습니다.

 함수 미리보기 (색) {
  document.querySelector ( '#dragged'). textContent =`dragged $ {color}`;
}

문서
  .QuerySelector ( '#red')
  .addeventListener ( 'dragstart', evt => preview ( 'red'));
문서
  .QuerySelector ( '#Yellow')
  .addeventListener ( 'DragStart', evt => preview ( 'Yellow'));
문서
  .QuerySelector ( '#green')
  .addeventListener ( 'dragstart', evt => preview ( 'green'));

이것은 더 간결하지만 여전히 여러 기능과 이벤트 리스너가 필요합니다.

이벤트 객체를 활용하십시오

이벤트 객체는 청취자를 단순화하는 핵심입니다. 이벤트 리스너가 호출되면 이벤트 객체를 첫 번째 매개 변수로 보냅니다. 이 개체에는 이벤트가 발생한시기와 같이 발생한 이벤트를 설명하기위한 일부 데이터가 포함되어 있습니다. 코드를 단순화하기 위해 evt.currentTarget 속성을 사용할 수 있습니다. 여기서 currentTarget 이벤트 리스너를 첨부하는 요소를 나타냅니다. 이 예에서는 세 가지 색상의 사각형 중 하나입니다.

 const preview = evt => {
  const color = evt.currenttarget.id;
  document.querySelector ( '#dragged'). textContent =`dragged $ {color}`;
};

document.querySelector ( '#red'). addEventListener ( 'DragStart', 미리보기);
document.querySelector ( '#Yellow'). addEventListener ( 'DragStart', 미리보기);
document.querySelector ( '#green'). addEventListener ( 'DragStart', 미리보기);

이제 네 가지 함수 대신 하나의 함수 만 있습니다. 이벤트 리스너와 동일한 기능을 재사용 할 수 있으며 evt.currentTarget.id 는 이벤트를 트리거 한 요소에 따라 다른 값을 갖습니다.

이벤트 버블을 사용하십시오

마지막 변경은 코드의 줄 수를 줄이는 것입니다. 이벤트 리스너를 각 블록에 첨부하지 않고 단일 이벤트 리스너를 모든 색상 블록을 포함하는 요소에 첨부하십시오.

트리거되면 이벤트는 이벤트의 요소 (사각형 중 하나)로 시작됩니다. 그러나 그것은 거기서 멈추지 않을 것입니다. 브라우저는 요소의 각 상위 요소로 이동하여 모든 이벤트 리스너를 호출합니다. 이것은 문서의 루트 요소로 계속됩니다 (HTML에서 상표). 이 과정은 이벤트가 문서 트리에 거품처럼 상승하기 때문에 "버블"이라고합니다. 이벤트 리스너를 섹션 요소에 첨부하면 초점 이벤트가 드래그 된 색상 정사각형에서 부모 요소로 기포됩니다. 또한 이벤트 리스너 ( section 요소)를 첨부하는 요소 대신 이벤트 (제곱 중 하나)를 트리거하는 요소를 포함하는 evt.target 속성을 활용할 수 있습니다.

 const preview = evt => {
  const color = evt.target.id;
  document.querySelector ( '#dragged'). textContent =`dragged $ {color}`;
};

documb

이제 우리는 많은 이벤트 청취자를 하나만 줄였습니다! 보다 복잡한 코드의 경우 더 잘 작동합니다. 이벤트 객체와 버블 링을 활용하여 JavaScript 이벤트를 제어하고 이벤트 처리기 코드를 단순화 할 수 있습니다.

클릭 이벤트는 어떻습니까?

evt.target dragstart 및 change 와 같은 이벤트에 매우 효과적이며, 몇 가지 요소 만 초점 또는 변경 입력을받을 수 있습니다.

그러나 우리는 일반적으로 클릭 이벤트를 듣고 응용 프로그램에서 버튼을 클릭하는 사용자에게 응답 할 수 있습니다. 클릭 이벤트는 문서의 모든 요소에 대해 큰 DIV에서 작은 스팬까지 트리거됩니다.

드래그 가능한 색상 사각형을 클릭 가능한 것으로 바꾸겠습니다.

<div draggable="true">
    아르 자형
  </div>
  <div draggable="true">
    와이
  </div>
  <div draggable="true">
    G
  </div>
<p>정사각형을 클릭하십시오</p>

 const preview = evt => {
  const color = evt.target.id;
  document.querySelector ( '#clicked'). textContent =`클릭 $ {color}`;
};

documb

이 코드를 테스트 할 때는 정사각형을 클릭 할 때가 아니라 때때로 "클릭"이 첨부되지 않습니다. 작동하지 않는 이유는 각 블록에 클릭 가능이 포함되기 때문입니다.<span></span> 드래그 할 수없는 요소<div> 요소. SPAN에는 ID 세트가 없으므로 <code>evt.target.id 속성은 빈 문자열입니다. 우리는 코드의 컬러 사각형에만 관심이 있습니다. 사각형 안에서 어딘가에 클릭하면 부모 정사각형 요소를 찾아야합니다. element.closest() 사용하여 클릭 된 요소에 가장 가까운 상위 요소를 찾을 수 있습니다.

 const preview = evt => {
  const element = evt.target.closest ( 'div [draggable]');
  if (element! = null) {
    const color = element.id;
    document.querySelector ( '#clicked'). textContent =`클릭 $ {color}`;
  }
};

이제 우리는 클릭 이벤트에 단일 리스너를 사용할 수 있습니다! element.closest() NULL을 반환하면 사용자가 컬러 정사각형 외부의 어딘가에 클릭하고 이벤트를 무시해야 함을 의미합니다.

더 많은 예

다음은 단일 이벤트 리스너를 활용하는 방법을 보여주는 다른 예입니다.

목록

일반적인 패턴은 JavaScript를 사용하여 새로운 프로젝트가 동적으로 삽입되는 대화식 프로젝트 목록을 갖는 것입니다. 이벤트 리스너를 각 프로젝트에 첨부하면 코드는 새 요소가 생성 될 때마다 이벤트 리스너를 처리해야합니다.

<div id="buttons-container"></div>
<button id="add">새 버튼을 추가하십시오</button>

 ButtonCounter = 0을하자;
document.querySelector ( '#add'). addEventListener ( 'click', evt => {
  const newbutton = document.createElement ( 'button');
  newbutton.textContent = ButtonCounter;

  // "새 버튼 추가"를 클릭 할 때마다 새 이벤트 리스너 생성 NewButton.addeventListener ( 'Click', evt => {

    // 클릭하면 클릭중인 버튼 번호를 기록하십시오.
    document.querySelector ( ' #clicked'). textContent =`클릭 버튼 #$ {newButton.textContent}`;
  });

  버튼 카운터;

  const 컨테이너 = document.querySelector ( '##buttons-container');
  컨테이너. AppendChild (Newbutton);
});

거품을 활용하여 컨테이너에서 단일 이벤트 리스너를 사용할 수 있습니다. 응용 프로그램에서 많은 요소를 생성하면 리스너 수가 N에서 2로 줄어 듭니다.

 ButtonCounter = 0을하자;
const 컨테이너 = document.querySelector ( '##buttons-container');
document.querySelector ( '#add'). addEventListener ( 'click', evt => {
  const newbutton = document.createElement ( 'button');
  newbutton.dataset.number = buttoncounter;
  버튼 카운터;

  컨테이너. AppendChild (Newbutton);
});
container.addeventListener ( 'click', evt => {
  const clickedbutton = evt.target.closest ( 'button');
  if (clickedbutton! = null) {
    // 클릭하면 클릭중인 버튼 번호를 기록하십시오.
    document.querySelector ( ' #clicked'). textContent =`클릭 버튼 #$ {clickedbutton.dataset.number}`;
  }
});

형태

아마도 많은 입력이있는 양식이있을 수 있으며 모든 사용자 응답을 단일 객체로 수집하려고합니다.

이름:
우편:
비밀번호:

응답을하자 = {
  이름: '',
  이메일 : '',
  비밀번호: ''
};

문서
  .QuerySelector ( 'input [name = "name"]')
  .addeventListener ( 'Change', evt => {
    const inputElement = document.querySelector ( 'input [name = "name"]');
    response.name = inputElement.value;
    document.querySelector ( '#preview'). TextContent = json.stringify (응답);
  });
문서
  .QuerySelector ( '입력 [이름 = "이메일"]')
  .addeventListener ( 'Change', evt => {
    const inputElement = document.querySelector ( 'input [name = "email"]');
    response.email = inputeLement.Value;
    document.querySelector ( '#preview'). TextContent = json.stringify (응답);
  });
문서
  .QuerySelector ( '입력 [이름 = "암호"]')
  .addeventListener ( 'Change', evt => {
    const inputElement = document.querySelector ( 'input [name = "password"]');
    response.Password = inputElement.Value;
    document.querySelector ( '#preview'). TextContent = json.stringify (응답);
  });

대신 부모를 사용합시다<form></form> 요소의 단일 리스너.

 응답을하자 = {
  이름: '',
  이메일 : '',
  비밀번호: ''
};

document.querySelector ( 'form'). addEventListener ( 'change', evt => {
  응답 [evt.target.name] = evt.target.value;
  document.querySelector ( '#preview'). TextContent = json.stringify (응답);
});

결론적으로

이제 우리는 복잡한 이벤트 핸들러 혼돈을 여러 곳으로 단순화하기 위해 이벤트 버블 및 이벤트 객체를 활용하는 방법을 알고 있습니다. 이 기사가 새로운 관점에서 이벤트 핸들러에 대해 생각하는 데 도움이되기를 바랍니다. 나는 초기 개발 경력에서 같은 일을하기 위해 중복 코드를 쓰는 데 많은 시간을 소비 한 후에는 저에게 계시였습니다.