[코딩애플 JS기초] 이벤트 버블링과 관련 함수

Jessie H·2022년 4월 27일
0

코딩애플 JS 기초

목록 보기
11/19
post-custom-banner

이벤트 버블링

어떤 html 태그에 이벤트가 발생하면 그 부모 요소까지 이벤트가 실행되는 현상

<div class="black-bg">
        <div class="white-bg">
          <h4>로그인하세요</h4>
          <form action="prac.html" id="loginform">
            <div class="form-floating mb-3">
              <input
                type="email"
                class="form-control"
                id="email"
                placeholder="name@example.com"
              />
              <label for="floatingInput"></label>
            </div>

만약 여기서 <div class=white.bg> 인 곳에 이벤트가 발생한다면 그 부모요소인 <div class=black.bg>까지 이벤트가 발생한다는 것!


이벤트 버블링 관련 함수

e.target //유저가 현재 누른 거
e.currentTarget (this라고도 표현 가능)//이벤트 걸려있는 거
e.preventDefault();//기본 이벤트 실행 막기
e.stopPropagation();//이벤트 버블링 막기

**Propagation: the action of widely spreading and promoting an idea, theory, etc.

profile
코딩 공부 기록장
post-custom-banner

0개의 댓글