1 var log = document.createElement('pre');2 3 window.addEventListener('load', init, true);4 5 6 function init(event) {7 var test = document.createElement('div');8 test.className = 'test';9 10 var div1 = document.createElement('div');11 div1.innerHTML = 'div1';12 div1.tag = 'div1';13 14 var div2 = document.createElement('div');15 div2.innerHTML = 'div2';16 div2.tag = 'div2';17 18 var div3 = document.createElement('div');19 div3.innerHTML = 'div3';20 div3.tag = 'div3';21 22 23 div1.addEventListener('click', e1, true);24 div2.addEventListener('click', e1, true);25 div3.addEventListener('click', e1, true);26 27 document.body.appendChild(log);// log28 test.appendChild(div1);29 div1.appendChild(div2);30 div2.appendChild(div3);31 document.body.appendChild(test);32 }33 34 35 function e1(event) { /* método burbuja = true; */36 var e = document.createElement('div');37 e.style.cursor = 'pointer';38 e.style.display = 'inline-block';39 e.addEventListener('mouseover', mouseInOrange, true);40 e.addEventListener('mouseout', mouseOutWhite, true);41 42 var name = document.createElement('span');43 name.innerHTML = '['+this.tag+'] ';44 e.appendChild(name);45 46 var info = document.createElement('div');47 info.style.display = 'none';48 info.style.position = 'absolute';49 info.style.backgroundColor = 'white';50 info.style.border = 'solid gray 1px';51 info.style.padding = '16px';52 for (key in event)53 info.innerHTML += '<b>'+key+'</b> = '+event[key]+'<br>';54 e.appendChild(info);55 e.info = info;56 57 log.appendChild(e) ;58 //log.innerHTML += ;59 }60 61 function mouseInOrange(event) {62 this.style.backgroundColor = 'orange';63 this.info.style.display = '';64 }65 66 function mouseOutWhite(event) {67 this.style.backgroundColor = '';68 this.info.style.display = 'none';69 }70 71 72 73 74 Este ShareCode tiene versiones:
- Propagación de eventos de adentro hacia... (19/06/2011)
- Propagación de eventos de afuera hacia ... (19/06/2011)
- Propagación de eventos de afuera hacia ... (24/04/2013)
- Propagación de eventos de afuera hacia ... (24/04/2013)
- Propagación de eventos de afuera hacia ... (24/04/2013)
- Propagación de eventos de afuera hacia ... (24/04/2013)
Enlace
El enlace para compartir es: