[컴][웹][자바스크립트] javascript 에서 event 를 binding 하기

update

•  javascript 에서 event 를 binding 하기 / event capturing 과 event bubbling

----

event bubbling 이벤트 버블링
다른 레이어의 페이지가 클릭 안되게 하는법

javascript 에서 event 를 binding 하는 방법
참고자료: http://triaslama.wordpress.com/2008/07/22/four-ways-javascript-binding-event-listeners/ 

일단 기본적으로 아래와 같이 3가지가 있다.

1. tag 내에서 binding 하는 방법.
   
2. <script> tag 내부에서 binding 하는 방법.
3. addEventListener() 를 이용하는 방법.
    

이중에 3번째 방법이 최근 W3C 에서 권장하는 방법이다.
 

아래에 예시를 적어놓는다. 참고로 W3C 가 권장하는 방법에서는 event capturing 과 event bubbling 을 제공한다.

event capturing 과 event bubbling 에 대한 설명(http://www.quirksmode.org/js/events_order.html)

Event prevention

event.stopPropagation (event.cancelBubble in IE)
근데, 반대로, click 을 할 때 단 한 곳에만 event 를 발생시키게 하고 싶을 수 있다. 즉 capturing 과 bubbling 을 막고 싶을 수가 있는데, 그때는 아래의 코드를 사용하면 된다.

  e.cancelBubble = true; 
  if (e.stopPropagation) e.stopPropagation(); 
 
http://ultteky.egloos.com/10452121

event.preventDefault
event.preventDefault() 로 element 가 가지는 기본 이벤트 를 취소할 수 있다. 다시 말하면, <a> 는 click 하는 순간 href 에 있는 경로로 이동하게 되어 있는데, click 이벤트 handler 를 추가했다면, 2가지 행위가 일어나게 된다. 이때 내가 만든 click event handler 만 동작하게 하고 싶을 때 사용할 수 있는 함수 이다.
http://angeleyes.tistory.com/261

Examples

1. <tag onclick='do'>

<img id='test' src="image.jpg" onclick="window.open('nextimage.jpg')">

2. variable.event = eventHandler

<script lang="javascript" type="text/javascript">

var testImg;

window.onload = function()

{

testImg= document.getElementById("test");

testImg.onclick = onClickHandler;

};

function onClickHandler()

{

 window.open('nextimage.jpg');

}

</script>

3. addEventListener

<script lang="javascript" type="text/javascript">

var testImg;

window.onload = function()

{

testImg= document.getElementById("test");

testImg.addEventListener('click', onClickHandler, false); // false is for event bubbling

};

function onClickHandler()

{

 window.open('nextimage.jpg');

}

</script>