js 이벤트 버블링에서 버블링 요소를 얻는 방법-JS 튜토리얼-php.cn

js 이벤트 버블링에서 버블링 요소를 얻는 방법

WBOY

풀어 주다： 2024-02-20 09:13:36

원래의

400명이 탐색했습니다.

js 이벤트 버블링에서 버블링 요소를 얻는 방법

js 이벤트 버블링에서 버블링 요소를 가져오는 방법에는 구체적인 코드 예제가 필요합니다.

이벤트 버블링은 요소의 이벤트가 트리거될 때 상위 상위 요소도 이벤트를 수신한다는 의미입니다. JavaScript에서는 이벤트 객체를 통해 버블링 요소를 얻을 수 있습니다. 아래에서는 버블링 요소를 가져오는 방법을 설명하기 위해 구체적인 코드 예제를 제공합니다.

먼저 아래와 같이 중첩된 요소가 있는 HTML 페이지가 필요합니다.

<!DOCTYPE html>
<html>
<head>
<title>事件冒泡示例</title>
</head>
<body>
  <div id="outer">
    <div id="inner">
      <button id="button">点击我</button>
    </div>
  </div>

<script src="script.js"></script>
</body>
</html>

로그인 후 복사

이 페이지에는 외부 div 요소(id는 "outer"), 내부 div 요소(id는 "inner")가 있습니다. 버튼 요소(id는 "버튼").

다음으로 이벤트 버블링을 처리하고 버블링 요소를 가져오기 위한 JavaScript 파일이 필요합니다. script.js 파일에서 클릭 이벤트를 처리하고 버블링 요소의 ID를 얻습니다. 코드는 다음과 같습니다.

// 获取外层div元素
var outer = document.getElementById('outer');

// 绑定点击事件处理函数
outer.addEventListener('click', function(event) {
  // 获取冒泡元素的id
  var bubbleElementId = event.target.id;
  
  // 打印冒泡元素的id
  console.log('冒泡元素的id：', bubbleElementId);
});

로그인 후 복사

위 코드에서는 먼저 getElementById 메서드를 통해 외부 div 요소를 얻은 다음 addEventListener 메서드를 사용하여 클릭 이벤트 핸들러를 여기에 바인딩합니다. 이벤트 처리 함수에서는 이벤트를 발생시킨 요소, 즉 버블링 요소를 얻기 위해 이벤트 객체의 target 속성을 사용한다. 그런 다음 대상 요소의 id 속성을 통해 버블 요소의 ID를 가져옵니다. 마지막으로 console.log 메소드를 사용하여 버블링된 요소의 ID를 브라우저 콘솔에 인쇄합니다.

페이지에서 버튼을 클릭하면 이벤트가 외부 div까지 버블링되고 콘솔에서 버블링된 요소의 id 출력을 볼 수 있습니다.

위의 코드 예제를 통해 JavaScript에서 버블 요소를 가져오는 방법을 명확하게 이해할 수 있습니다.

위 내용은 js 이벤트 버블링에서 버블링 요소를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!