????? ??? ?? ??? 7? ??????. ?? ??? ??? ???? ?? ??? ???? Frontend Camp? ??? ???.

??? ???? ??? ?? DOM(Document Object Model)? ?? ???????. ? ? ????? ?? ?????.

??? ???

??? ?????? ???? ?? ??(event.target)?? ???? ???? ? ??? ?? ??? ???? ??(??)???. ??? ?? ??? ?? ??? ???? ??????.

/*
<div>



<p>In the snippet above, when you click the button you'll see the following output in console:<br>
</p>

<pre class="brush:php;toolbar:false">"Button handler"
"Container handler"

?? ??? ???? ???? ???? ??? ? event.target ??? ???? ?????. ?? ???? ???? ???? ?? ??? ??? ???? ?????.

?? ?? ???? ?????? ??? ???? ?? ????? ?? ? ?? ??? ????.

????? stopPropagation() ???? ???? ???? ??? ? ????. ? ???? ?? ??? ???? ??? ???? ????? ??? ???? ???? ????.

btn.addEventListener('click', function(event) {
  console.log('Button handler!');

  // ancestor elements won't receive the event
  event.stopPropagation();
});

target.event ??? ???? ???? ??? ??? ??? ? ????. ??, ???? ?? ?? ??? event.currentTarget? ???? ??? ? ????.

container.addEventListener('click', function(event) {
  console.log('Container handler!'); // 'Container handler!'
  console.log(event.target); // btn
  console.log(event.currentTarget); // container
  console.log(this); // container
});

? ???? ?? ? ??? ?? ?????? ?? ?? ?????.

??? ??

???? ??? ??? ?????. ? ???? ??? ???? ?? ???? ???? ? ?? ??? ????. ?

??? ??? ? ??? ?????.

1. ?? ??: ???? ?? ???? ?? ??? ????.
2. ?? ??: ?? ???? ???? ?????.
3. ??? ??: ???? ?? ??? ?? ???? ?????.

????? ?? ??? ???? ?? ? ??? ????? ?????. ?? ???? ??? ???? ????? ? ?? ??? true? ?????.

el.addEventListener('click', () => {}, true);
// or to be more explicit
el.addEventListener('click', () => {}, { capture: true });

?? ???? ???? ???? ?? ??? ????? ???? ????.

???? ???? ?? ???? event.stopPropagation()? ???? ??? ??? ? ?? ???? ????(? ?? DOM ???).

?? ??? ????? ?? ?? ?? ????? ??? ???? ?? ???? ???? ????.

/*
<div>



<p>??? ?? event.stopPropagation()? ???? ?? ??? ??? ??? ?? ?????. ????? ?? ??? DOM ????? ????? ??? ??? ?? ??? ??? ? ????.</p><p>??? ??? ???? ?? ?? ???? ????. ????? ??? ?? ??? "??? ??"? ?? ?? ?? ??? ????.</p>

<p>? ???? ?? ??? ??? ??? ?? ??? ?????. ? ??? ??? ????. ??? ???? ??? ?????. ??</p>


<hr>

<h2>
  
  
  ??
</h2>

<ol>
<li>??? ??? ??, ?? ? ??? ??? ? ??? ?????.</li>
<li>?? ????? ???? ?? ???? ??(event.target) ??? ?????.</li>
<li>??? ????? ???? ?? ???? ?? ??? ????.</li>
<li>????? ?? ??? ???? ?? ? ??? ????? ?????.</li>
<li>addEventListener ??? ? ?? ??? ???? ?? ???? ???? ??? ? ????.</li>
<li>??? ??? ?? ????? event.stopPropagation()? ???? ??? ??? ? ?? ???? ????.</li>
</ol>


<hr>

<p>?? ?? ??? ??? ????? ? ????? ??? ??? ??? ??? ???.</p>

<p>"?"?? ??? ?????. ??? ??? ?? ? ???? ??? ?? ?? ?????? ??? ??? ???. ?</p>


          

            
  

            
        

? ??? ??? ??: ??? ? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!