JavaScript 인터뷰 질문:이벤트 세부 정보

아마존에서 내 책 보기https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
지금 http://jauyeung.net/subscribe/에 내 이메일 목록을 구독하십시오.
전방 개발자의 일자리를 얻기 위해서 우리는 코딩 면접을 완성해야 한다.
이 문서에서는 프런트엔드 JavaScript에서 이벤트를 처리하는 문제를 다룹니다.

JavaScript에서는 이벤트 프로세서를 어떻게 사용합니까?
이벤트는 링크를 클릭하거나 텍스트를 입력하는 등의 사용자 활동으로 인해 발생합니다.요소에서 이벤트를 터치할 때 코드를 실행하려면 이벤트 처리 프로그램이 필요합니다.
이벤트 처리 프로그램이 대상의 추가 속성으로 설정되었습니다.예를 들어 버튼 이벤트를 처리하려면 다음과 같이 쓸 수 있습니다.

const button = document.getElementById('button');
button.onclick = (event) => {
  //...
}

버튼의 ID가 button라고 가정하면 이벤트 처리 함수를 onclick 속성으로 설정하고 onclick 탐지기를 추가해서 클릭한 이벤트를 처리할 수 있습니다.event 매개 변수는 이벤트에 대한 다양한 정보를 포함하는 대상이다.
우리도 addEventListener전화를 사용하여 같은 일을 할 수 있다.

const button = document.getElementById('button');
button.addEventListener('click', (event) => {
  //...
})

첫 번째 매개변수에는 이벤트 이름이 있습니다.이벤트 탐지기는 addEventListener 방법이 호출된 두 번째 매개 변수에 있습니다.
event.preventDefault()'와 event.stopPropagation()'는 어떤 차이가 있습니까?event.preventDefault() 이벤트를 트리거하는 모든 요소의 기본 동작을 중지합니다.
만약 그것이 form 요소와 함께 사용된다면, 우리는 그것을 제출하는 것을 막을 것입니다.a 요소와 함께 사용하면 preventDefault() 내비게이션을 막을 수 있습니다.event.stopProgation() 사건의 전파를 막고 사건의 거품과 포획 단계에서 발생하는 것을 막는 데 전문적으로 쓰인다.

원소에 사용되었는지 어떻게 알 수 있습니까? event.preventDefault()'우리는 이벤트 대상 중의 event.defaultPrevented 속성을 검사할 수 있다.true라면event.preventDefault()이 호출됩니다.

이벤트란?대상?event.target는 사건이 발생하는 원소 또는 사건을 촉발하는 원소다.
예를 들어, 다음과 같은 HTML이 있다고 가정합니다.

<div id='div'>
  <button id='button'>
    Click Me
  </button>
</div>

다음과 같은 JavaScript 코드가 있습니다.

const button = document.getElementById('button');
button.onclick = (event) => {
  console.log(event.target.id);
}

Click Me 단추를 눌렀을 때, 우리는 button 단추를 눌렀기 때문에 console.log 단추를 받을 수 있습니다.
이것은 event.target가 사건을 촉발하는 요소임을 나타낸다.
다음과 같이 div에 대한 이벤트 처리 프로그램을 추가하는 경우

const button = document.getElementById('button');
const div = document.getElementById('div');
button.onclick = (event) => {
  console.log(event.target.id);
}

div.onclick = (event) => {
  console.log(event.target.id);
}

우리는 또한 button에 로그인했기 때문에 event.target는 클릭 사건의 기원 요소가 틀림없다.

이벤트란?현재 목표?event.currentTarget는 현식 추가 이벤트 처리 프로그램의 요소이다.
예를 들어, 다음과 같은 HTML이 있다고 가정합니다.

<div id='div'>
  <button id='button'>
    Click Me
  </button>
</div>

다음은 JavaScript입니다.

const button = document.getElementById('button');
const div = document.getElementById('div');
button.onclick = (event) => {
  console.log(`button.onclick ${event.currentTarget.id}`);
}

div.onclick = (event) => {
  console.log(`div.onclick ${event.currentTarget.id}`);
}

Click Me 단추를 눌렀을 때 button.onclick button 이벤트 처리 프로그램에서 기록하고 button.onclick 이벤트 처리 프로그램에서 기록하는 것을 볼 수 있습니다.
따라서 div.onclick div는 이벤트 처리 프로그램에 추가된 요소입니다.

무엇이 활동 대표단입니까?
이벤트 위임은 이벤트 감청기를 부모 요소에 추가하는 것이지 하위 요소에 추가하는 것이 아닙니다.
감청기는 이벤트를 촉발하는 요소가 이벤트를 촉발하기 때문에 하위 항목에서 촉발하는 모든 요소를 촉발합니다.
그것은 부모 요소에 추가된 처리 프로그램이 하나밖에 없기 때문에 매우 유용하다.
제거된 요소에서 처리 프로그램의 귀속을 해제하고 새 요소로 귀속시킬 필요도 없습니다.
예를 들어, 다음 HTML이 있는 경우...

<div id='div'>
  <button id='button-a'>
    Click Me
  </button>
  <button id='button-b'>
    Click Me
  </button>
</div>

...그런 다음 다음 다음 JavaScript 코드를 작성하여 이벤트 위임을 추가할 수 있습니다.

const div = document.getElementById('div');

div.onclick = (event) => {
  if (event.target.matches("button#button-a")) {
    alert('Button A clicked');
  } else if (event.target.matches("button#button-b")) {
    alert('Button B clicked');
  }
}

위 코드에서 IDdiv.onclick를 받은 다음 클릭 이벤트 프로세서를 추가합니다.
그리고 이벤트 처리 함수에서, 우리는 event.currentTarget 방법으로 클릭 이벤트를 호출한 div 를 검사합니다.
ID가 event.target인 버튼을 클릭하면 경고 상자matches가 표시됩니다.
ID가 button-a인 버튼을 클릭하면 경고 상자Button A clicked가 표시됩니다.
보시다시피 이벤트 처리 프로그램은 하나뿐이지만, 모든 단추의 클릭 이벤트를 처리할 수 있습니다.

문서 - button-b 이벤트와 문서 Button B clicked 이벤트 간의 차이점은 무엇입니까?Load 이벤트는 처음 HTML 문서가 완전히 로드되고 해석된 후에 트리거되므로 스타일시트, 이미지 및 하위 프레임이 로드될 때까지 기다릴 필요가 없습니다.DOMContentLoaded 이벤트는 DOM 및 모든 관련 리소스 및 자산을 로드한 후에만 발생합니다.

무엇이 사건 순환입니까?
이벤트 순환은 단일 루틴 순환으로 호출된 창고를 감시하고 작업 대기열에 실행할 코드가 있는지 확인합니다.
호출 창고가 비어 있고 작업 대기열에 리셋 함수가 있으면 작업 대기열에서 대기열을 종료하고 호출 창고로 밀어붙여서 실행합니다.

결론
JavaScript에서는 이벤트 탐지기를 요소에 첨부하여 이벤트를 처리합니다.
우리는 또한 사건 탐지기가 모든 요소에 추가되는 것을 피하기 위해 사건 위임을 사용할 수 있다.그것 또한 동적 요소 이벤트를 처리하는 데 도움이 된다. 왜냐하면 우리는 이벤트 의뢰를 통해 이벤트 탐지기를 추가하고 삭제할 필요가 없기 때문이다.
JavaScript에서 이벤트 사이클은 호출된 스택을 모니터링하고 실행하는 단일 스레드 사이클입니다.호출 창고에 내용이 없으면 작업 대기열의 모든 내용이 호출 창고로 전송되어 실행됩니다.