JavaScript의 공통 이벤트 버블링 메커니즘을 마스터하세요.-JS 튜토리얼-php.cn

JavaScript의 공통 이벤트 버블링 메커니즘을 마스터하세요.

王林

풀어 주다： 2024-02-19 16:43:05

원래의

516명이 탐색했습니다.

JavaScript의 공통 이벤트 버블링 메커니즘을 마스터하세요.

JavaScript의 일반적인 버블링 이벤트: 일반적인 이벤트의 버블링 특성을 마스터하려면 특정 코드 예제가 필요합니다.

소개:
JavaScript에서 이벤트 버블링은 이벤트가 레이어 요소 바깥쪽으로 가장 깊은 중첩 수준을 가진 요소에서 시작된다는 것을 의미합니다. 가장 바깥쪽 부모 요소에 도달할 때까지 전파됩니다. 일반적인 버블링 이벤트를 이해하고 마스터하면 사용자 상호 작용 및 이벤트 처리를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 독자가 더 잘 이해할 수 있도록 몇 가지 일반적인 버블링 이벤트를 소개하고 특정 코드 예제를 제공합니다.

1. 클릭 이벤트(click):

클릭 이벤트는 가장 일반적인 버블링 이벤트입니다. 사용자가 페이지의 요소를 클릭하면 해당 요소의 클릭 이벤트가 트리거된 다음 가장 바깥쪽 상위 요소의 클릭 이벤트가 트리거될 때까지 외부 요소로 단계적으로 전파됩니다.

HTML 샘플 코드:

<div id="outer">
  <div id="inner">
    <button id="btn">点击我</button>
  </div>
</div>

로그인 후 복사

JavaScript 코드:

document.getElementById('outer').addEventListener('click', function() {
  console.log('outer clicked');
});

document.getElementById('inner').addEventListener('click', function() {
  console.log('inner clicked');
});

document.getElementById('btn').addEventListener('click', function() {
  console.log('button clicked');
});

로그인 후 복사

버튼을 클릭하면 콘솔에 다음 결과가 출력됩니다.

button clicked
inner clicked
outer clicked

로그인 후 복사

2. 마우스 이동 이벤트(mousemove):

Mousemove 이벤트도 일반적인 버블링 이벤트입니다. . 사용자가 페이지에서 마우스를 움직이면 마우스 움직임 이벤트가 외부 요소에 단계적으로 전파됩니다.

HTML 샘플 코드:

<div id="outer">
  <div id="inner">
    <button id="btn">移动鼠标</button>
  </div>
</div>

로그인 후 복사

JavaScript 코드:

document.getElementById('outer').addEventListener('mousemove', function() {
  console.log('outer mousemove');
});

document.getElementById('inner').addEventListener('mousemove', function() {
  console.log('inner mousemove');
});

document.getElementById('btn').addEventListener('mousemove', function() {
  console.log('button mousemove');
});

로그인 후 복사

마우스가 버튼 위로 이동하면 콘솔은 다음 결과를 출력합니다.

button mousemove
inner mousemove
outer mousemove

로그인 후 복사

3. 키보드 누르기 이벤트(keydown):

키보드 누르기 이벤트도 발생합니다. 외부 요소까지 버블링합니다. 사용자가 페이지에서 키보드의 아무 키나 누르면 키보드 누르기 이벤트가 외부 요소에 단계별로 전파됩니다.

HTML 샘플 코드:

<div id="outer">
  <div id="inner">
    <input id="input" type="text" placeholder="按下键盘">
  </div>
</div>

로그인 후 복사

JavaScript 코드:

document.getElementById('outer').addEventListener('keydown', function() {
  console.log('outer keydown');
});

document.getElementById('inner').addEventListener('keydown', function() {
  console.log('inner keydown');
});

document.getElementById('input').addEventListener('keydown', function() {
  console.log('input keydown');
});

로그인 후 복사

입력 상자에서 키보드를 누르면 콘솔은 다음 결과를 출력합니다.

input keydown
inner keydown
outer keydown

로그인 후 복사

결론:
위의 몇 가지 일반적인 버블링 이벤트 예를 통해 우리는 JavaScript의 이벤트 버블링 적용에 대해 설명합니다. 이벤트 버블링을 마스터하면 사용자 상호 작용 및 이벤트 처리를 더 잘 처리하는 데 도움이 됩니다. 포커스 이벤트, 양식 이벤트 등과 같은 일부 이벤트는 버블링되지 않지만 대부분의 일반적인 DOM 이벤트는 버블링된다는 점에 유의해야 합니다. 개발 과정에서 필요에 따라 처리할 적절한 이벤트 유형을 선택하고 이벤트 버블링 특성에 따라 처리 논리를 조정해야 합니다. 이 글의 소개와 샘플 코드를 통해 독자들이 버블링 이벤트의 개념을 더 잘 이해하고 자신의 프로젝트에 적용할 수 있기를 바랍니다.

위 내용은 JavaScript의 공통 이벤트 버블링 메커니즘을 마스터하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!