[js] DOM_event

event

event : ~ 할 때

event listener : 위 event 때에 동작하는 함수

 

특정 element에 event listener을 추가하는 방법

element.addEventListener("이벤트", 함수);

element.on이벤트 = 함수;

 

특정 element에 event listener를 삭제하는 방법

element.removeEventListener("이벤트", 함수);

element.on이벤트 = undefined;

 

-Listener로 동작하는 함수는 이벤트 발생 때마다 동작(호출)되는데 이 때 발생된 이벤트 정보가 담긴 event 객체를 매개변수로 받을 수 있다

event.type : 이벤트 타입

event.target : 이벤트가 발생한 객체

 

 

* style 속성을 지울 땐 .style.outline =  ""

*이벤트 삭제할 땐 .on이벤트 = undefined

<div id="demo">이벤트 없어요</div><br>
<button id="add_event">이벤트 추가</button>
<button id="remove_event">이벤트 삭제</button>
<p id="event"></p>

<script>
//clickHandler 함수
function clickHandler(event){
	document.getElementById('event').innerHtml = event.type + " " + event.target;
    let bg = demoBox.style.background;
    if(bg != 'greenyellow') 
    	demobox.style.background = 'greenyellow';
    else
    	demobox.style.background = 'yellow';
})	
    
//mouseOverHandler 함수
function mouseOverHandler(event) {
	document.getElementById('event').innerHTML = event.type + " " + event.target;
    event.target.style.outline = "3px solid red";
    
    
addButton.addEventListener("click", function() {
    demoBox.innerHTML = "클릭해보세요";
    demoBox.addEventListener("click", clickHandler); /*클릭하면 clickHandler 함수 실행*/

    demoBox.onmouseover = mouseOverHandler;

    demoBox.onmouseout = function(event) {
        document.getElementById('event').innerHTML = event.type + " " + event.target;
        demoBox.style.outlint = ""; //스타일 속성 지울 땐 undefined 말고 "" 빈 문자열로.
   }
});


removeButton.addEventListener("click", function() {
	demoBox.removeEventListener("click", clickHandler);
    demoBox.innerHTML = "이벤트 없어요"
    
    demoBox.onmouseover = undefined;
	demoBox.onmouseoue = undefined;
 
 });

<p id="windowSize"></p>

 

 

 

bubbling

이벤트가 요소에서 발생하면 먼저 해당 요소에서 처리기를 실행한 다음 상위 요소에서 실행한 다음 다른 상위 요소에서 계속 실행한다 즉, 발생된 element의 이벤트가 상위로 전파된다

<style>
 body * {
   margin: 10px;
   border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

 

현재 3개의 element가 중첩되어 있다

p를 클릭하면 그 다음에 div가 실행되고 그 다음에 form이 실행된다

이처럼 이벤트가 내부 요소에서 부모로 거품처럼 보글보글 올라간다고 해서 버블링이라고 부른다

 

 

bubbling 중지

event.stopPropagation()를 쓰면 bubbling되는 것을 막을 수 있다

event.stopImmediatePropagation()을 사용하면 현재의 이벤트 핸들러도 중지할 수 있다

//방법 1
<ul>
  <li onclick="show(this)">Coffee</li> <!--this는 li elements-->
  <li onclick="show(this)">Tea
    <ul>
      <li onclick="event.stopPropagation(); show(this);">Black tea</li> 
      <li onclick="show(this)">Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
<script>
function show(e) {
  alert(e.childNodes[0].nodeValue)
}
</script>

//방법 2
<ul id="ad">
  <li>커피</li>
  <li>차
    <ul>
      <li>홍차</li>
      <li>녹차</li>
    </ul>
  </li>
  <li>우유</li>
</ul>
<script>
let li = document.querySelectorAll("#ad ul li"); //위의 li elements 다 가져옴
for(e of li) {
  // e.addEventListener("click", function(){show(this)}); //this는 e
     e.addEventListener("click", function(){show(this);}, true); //capturing
}




</script>