event capturing bubbling

문방구앞오락기 2017. 4. 18. 16:06

2017. 4. 18. 16:06

.가장 안에 있는 엘리먼트에 이벤트 발생되고 그 상위 이벤트가 동시에 발생된다고면

안에서부터 발생된다.

html 이벤트

body 이벤트

input 이벤트 가 된다고하면

INPUT HTML capturing

(index):18 INPUT BODY capturing

(index):18 INPUT FIELDSET capturing

(index):18 INPUT INPUT target

<html>

<head>

<style>

html{border:5px solid red;padding:30px;}

body{border:5px solid green;padding:30px;}

fieldset{border:5px solid blue;padding:30px;}

input{border:5px solid black;padding:30px;}

</style>

</head>

<body>

<legend>event propagation</legend>

</fieldset>

function handler(event){

var phases = ['capturing', 'target', 'bubbling']

console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);

}

// document.getElementById('target').addEventListener('click', handler, true);

// document.querySelector('fieldset').addEventListener('click', handler, true);

// document.querySelector('body').addEventListener('click', handler, true);

// document.querySelector('html').addEventListener('click', handler, true);

document.getElementById('target').addEventListener('click', handler, false);

document.querySelector('fieldset').addEventListener('click', handler, false);

document.querySelector('body').addEventListener('click', handler, false);

document.querySelector('html').addEventListener('click', handler, false);

//따라서 addEventListener의 3번째 파라미터는 CAPTURING의 기능이듯하다.

</script>

</body>

</html>

캡쳐링은 밖에서 안으로

버블링은 안에서 밖으로

문방구앞오락기