function(e)이벤트 객체 / 이벤트 버블링 - stopPropagation / 내장 이벤트 - preventDefault /

[ 이벤트 객체 ]

document.querySelector(" ").onclick 
= function( e ){ }; 

함수의 매개변수에 저런식으로 ( e, ev, eve ) 넣어두면 
이벤트의 결과값이 저 매개변수로 들어감
[ = 이벤트 객체  ]

document.querySelector(" ").onclick 
= function( e ){ 
클릭 좌표 : e.pageX, e.pageY ( 클릭한 x,y좌표 정보 )  
클릭 태그명 : e.target.tagName
클릭 태그속성 : : e.target.type / e.taget.value / 
e.target  : 이벤트가 발생했던 태그
}; 

=> 이런식으로 다양한 정보를 제공해준다 

특히나 e.target 은 자주쓰인다! 

 

 

 

 

 

[ 이벤트 버블링 ]

 

<h1> <a href=""> 링크 </a> </h1> 

- 링크 글씨 부분은

a 태그영역이기도하고 
동시에 h1 태그영역이기도 한다.

( h1 태그(부모)는 a태그(자식)을 포함 ) 

 

- 기본적으로  h1영역에  onclick 이벤트 걸어두고 
h1만의 영역 click 하면 h1 이벤트만 실행된다.   

- 그럼 a 태그영역을 click 하면,

여긴 h1도 해당되는 겹치는 부분인데 
어떻게 실행되는가?

- 기본적으로 
=> a태그(자식) 발생 이벤트는 자동으로 
h1태그(부모)로 "전파" 된다. 

 

= "이벤트 bubbling"

: 자식이벤트 발생하면 자동으로 부모 이벤트도 발생

addEventListener("click", 함수, false ); 

저 false 가 의미하는게, 이벤트버블링 방향, 순서가  
[ 자식 => 부모 ] 임을 의미한다.  

[ 자식이벤트 발생 ====전파===> 부모이벤트 발생 ]

 

 

document.querySelector("a").onclick =
function(e){
//e.preventDefault();
//e.stopPropagation();
alert("a태그 이벤트");
} ;

document.querySelector("h1").onclick =
function(){ alert("h1태그 이벤트"); } ;

 

순서 : (자식)a태그 이벤트 => (자식)a내장 링크이동 => (부모)h1태그 이벤트

 

- 이렇게 자동으로 이벤트Bubbling 이 발생하는걸 막아 둘 수 있다. 

 

[ 이벤트 버블링 취소시키기 "stopPropagation" ]
document.querySelector("a").onclick =
function(e){ 
e.stopPropagation(); 
alert("a태그 이벤트"); 
} ;

=> 이렇게 막아두면, a 자식 이벤트를 발생시켜도, 

h1 부모 이벤트는 발생하지 않는다. 

 

 

 

[ 기본 default 이벤트를 지닌 태그들 3 ]

1. a 태그 
2. input type = submit 
3. input type = reset  ( 입력내용 삭제 action 이동취소 ) 

 

=> 이 3가지 태그들은, 기본동작 default 이벤트 가 내장되어있다.

이것들 또한 취소시킬 수 있다. 

[ "preventDefault"  ]

 

document.querySelector("a").onclick =
function(e){ 
e.preventDefault(); 

alert("a태그 이벤트"); 
} ;

 

=> a 링크를 눌러도 해당링크로 이동하는 이벤트가 발생하지 않는다. 

 

 

 

참고 ) 이 3 가지 내장기능 태그들은

onclick 방식으로도 이벤트를 하나 추가 할 수 있다. 

( 다른 태그들은 onclick 방식으로는 한가지 이벤트만 실행 가능하다 

Listener 방식으로는 여러개 가능 ) 
document.querySelector("a").onclick =
function(){ alert("a태그 이벤트"); } ; 

------------- 

[ submit ] 

submit 이벤트는 사실상 form 태그의 action 이벤트를 의미 
=> submit 이벤트 수정할때 
form 태그의 이벤트를 가지고와서 수정해야 한다. 

 

document.querySelector("form").addEventListener("submit",

// form 태그를 가져와서, 이벤트 submit 이 발생할 때, 

function(e){

e.preventDefault();     // default 기능 막겠다.   

// 직접 action 행동을 초기화 해서 없애버려도 된다.

 

document.querySelector("form").action = " "; 

e.target.action = " "; 

this.action = " "; 

// 다 같은 효과. e.target = 현재 태그 / this = 현재 태그 ( e 이벤트객체 없을때도 사용가능 )

}

, false );