"이벤트 버블링"이 있다는 소문이 있습니다!

3662 단어 htmleventbubblingbegginner
저는 이 시점에서 우리 모두 이벤트가 무엇인지 꽤 잘 알고 있다고 확신합니다. 이는 마우스 호버링, 키 입력, 클릭 등을 의미할 수 있습니다. 이벤트 추적은 당사 웹페이지를 대화형으로 만드는 데 도움이 됩니다. 즉, "이벤트 버블링"에 대해 들어본 적이 있습니까?

이벤트 버블링은 하위 노드에서 이벤트가 발생할 때 동일한 이벤트가 상위 노드 전체에서 맨 위까지 추적된다는 사실을 설명하는 데 사용되는 용어입니다. 우리는 이미 거품에 대해 이야기하고 있으므로 물/다이버 비유를 사용하여 이벤트 거품이 의미하는 바를 설명할 것입니다. 이 비유에서 우리 웹 페이지의 상단 또는 표면은 <body> 이고 내부의 모든 <div>은 다양한 경험 수준의 다이버가 될 것입니다.

<body>
    <img src="/images/surface.png" width="300" height="100">
    <div>
      <img src="/images/beginnerDiver.png" width="100">
      <div>
        <img src="/images/experiencedDiver.png" width="100">
        <div>
          <img src="/images/expertDiver.png" width="100">
        </div>
      </div>
    </div>
</body>




최상위 레벨에는 본체/표면이 있습니다. 한 레벨 아래에 중첩된 초보자 다이버가 있습니다. 그보다 한 단계 아래에 숙련된 다이버가 있습니다. 마지막으로 가장 깊은 수심에는 전문 다이버가 있습니다.

이제 웹 페이지가 생겼으니 이벤트를 추가해 봅시다! 가장 간단한 것은 클릭 이벤트이므로 표면 수준에 onclick 이벤트를 추가하겠습니다. 표면 수준은 웹페이지의 본문이므로 아무 곳이나 클릭하면 이 클릭 이벤트가 트리거됩니다. 전문가 다이버 레벨에 클릭 이벤트도 추가하겠습니다. 이것이 우리 코드의 현재 모습입니다.

<body onclick="alert('Surface')">
    <img src="/images/surface.png" width="300" height="100">
    <div>
      <img src="/images/beginnerDiver.png" width="100">
      <div>
        <img src="/images/experiencedDiver.png" width="100">
        <div onclick="alert('Expert')">
          <img src="/images/expertDiver.png" width="100">
        </div>
      </div>
    </div>
</body>


숙련된 다이버는 꽤 깊은 곳에서 둥지를 틀고 있습니다! 그가 거품(이 경우: 클릭 이벤트)을 포기한다면 어떤 일이 일어날 것이라고 생각하십니까? "전문가"라고 경고할 것이라고 짐작했다면 부분적으로 맞을 것입니다!


우리는 또한 표면 수준에 대한 경고를 받습니다!
그 이유는 두 경보가 동일한 이벤트에 연결되어 있기 때문입니다. 이 상황에서 이벤트는 클릭이었습니다. 이 이벤트는 전문가 다이버에서 각 상위 노드(경험 다이버 및 초보 다이버)로 "버블링"되었지만 두 노드 모두 클릭 이벤트가 없었으므로 아무 일도 일어나지 않았습니다. 그것은 상단에 도달했고 동일한 클릭 이벤트가 표면 클릭 이벤트를 통해 버블링되어 우리에게 경고했습니다! 중첩의 각 수준에 onclick 이벤트를 추가한 다음 한 수준을 클릭하면 각 수준에서 실행되는 것을 볼 수 있으며 곧 부모가 됩니다.

<body onclick="alert('Surface')">
    <img src="/images/surface.png" width="300" height="100">
    <div onclick="alert('Beginner')">
      <img src="/images/beginnerDiver.png" width="100">
      <div onclick="alert('Experienced')">
        <img src="/images/experiencedDiver.png" width="100">
        <div onclick="alert('Expert')">
          <img src="/images/expertDiver.png" width="100">
        </div>
      </div>
    </div>
</body>




간단히 말해서 이벤트 버블링입니다!
WebAssembly를 사용하여 첫 번째 C & Cpp 프로그램 실행
Heroku에서 Rails/Basic 인증을 도입한다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage