Event.bubbles

Event.bubbles - чи спливаюча подія.

Синтаксис:

Event.bubbles;

Параметри:

Event - об'єкт Event.

Опис:

bubbles властивість об'єкту Event яка містить логічне значення true або false, що представляє чи є подія спливаючою.

Спливаюча подія - це подія яка виконується по дереві DOM, тобто від нащадка до родича елемента.

<div id="iddiv" onclick="alert('клік DIV');" style="padding:5px;background-color:red;">div:
<p id="idp" onclick="alert('клік P');" style="padding:5px;background-color:#a1563d">Приклад <b id="idb" onclick="alert('клік B');" style="background-color:blue;">події</b>.</p>
</div>

div:

Приклад події.

Якщо клікнути на тег B то подія onclick виникає спочатку у тегу B, потім у P і потім у DIV - це ланцюжок спливаючої події.

Якщо подія не спливаюча - клікнувши по тегу B то подія onlick виникає лишу у тегу B.

По замовчуванню події у браузері є спливаючі, а от створена подія через конструктор Event() по замовчуванюю є не спливаюча.

Приклад:

var ev = new Event("myevent");
alert(  ev.bubbles );

Приклад не спливаючої події onclick:

//створюємо подію click НЕ спливаючу
var evB= new Event("click",{bubbles:false, cancelable:false});
//визиваємо подію для idb
document.getElementById("idb").dispatchEvent( evB );

Приклад спливаючої події onclik:

//створюємо подію onclick спливаючу
var evB = new Event("click",{bubbles:true, cancelable:false});
//визиваємо подію для idb
document.getElementById("idb").dispatchEvent( evB );