event bubbling 이벤트 버블링 / 다른 레이어의 페이지가 클릭 안되게 하는법 / javascript 에서 event 를 binding 하는 방법
javascript 에서 event 를 binding 하기
기본적으로 아래와 같이 3가지가 있다.
- tag 내에서 binding 하는 방법.
<script>tag 내부에서 binding 하는 방법.addEventListener()를 이용하는 방법.
이중에 3번째 방법이 W3C 에서 권장하는 방법이다.
W3C 가 권장하는 방법에서는 event capturing 과 event bubbling 을 제공한다.
event capturing 과 event bubbling
위의 글에서 event capturing, event bubbling 설명을 잘해준다.
W3C model 에서는 이 2개를 전부 지원한다.
그래서 click 이 발생하면, 처음에 capturing phase 가 시작돼서 쭉 event 가 child 로 전달된다.(propagate) 그리고 나서 이제 거기서 부터 parent 로 올라오면서 bubbling phase 가 시작된다.
element1.addEventListener('click',doSomething2,true)- 마지막 parameter 가
true–> ‘capturing phase’ 에 대한 event handler
- 마지막 parameter 가
element2.addEventListener('click',doSomething,false)- 마지막 parameter 가
false–> ‘bubbling phase’ 에 대한 event handler
- 마지막 parameter 가
| | / \
-----------------| |--| |-----------------
| element1 | | | | |
| -------------| |--| |----------- |
| |element2 \ / | | | |
| -------------------------------- |
| W3C event model |
------------------------------------------<body>
<h2>Bubbling Event in Javascript</h2>
<div id="parent">
<button id="child">
<p id="child">Child</p>
</button>
</div><br>
<script>
document.getElementById(
"child").addEventListener("click", function () {
alert("You clicked the Child element!");
}, false);
document.getElementById(
"parent").addEventListener("click", function () {
alert("You clicked the parent element!");
}, false);
</script>
</body>Event prevention
event.stopPropagation (event.cancelBubble in IE) [ref. 2]
click 을 할 때 단 한 곳에만 event 를 발생시키게 하고 싶을 수 있다. 즉 capturing 과 bubbling 을 막고 싶을 수가 있는데, 그때는 아래의 코드를 사용하면 된다.
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation(); event.preventDefault[ref. 3]
event.preventDefault() 로 element 가 가지는 기본 이벤트 를 취소할 수 있다.
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>
댓글 없음:
댓글 쓰기