«

Интерактивный пример

Данный пример показывает, как оперировать контейнером начала распространения события и зонами видимости

Диспатчеры интерактивные, можно смело тыкать в них палочкой

hlhl<div class="content"> <exec> <!-- Простые примеры. Контейнер начала распространения события: div.content --> <dispatch e="test"></dispatch> <dispatch e="test" p="global"></dispatch> <dispatch e="test" p="parent"></dispatch> <dispatch e="test" p="childNodes"></dispatch> <dispatch e="test" p="childNodes,b,.special"></dispatch> </exec> <e on="test" do="debug"></e> hlhl<div class="container_1"> <e on="test" do="debug"></e> hlhl<ul> <e on="test" do="debug"></e> hlhl<li> <e on="test" do="debug"></e> hlhlhl<b> <e on="test" do="debug"></e> <e hlhlglobal on="test" do="debug"></e> </b> </li> hlhl<li class="special"> <e on="test" do="debug"></e> hlhl<ul> <e on="test" do="debug"></e> hlhl<li> <e on="test" do="debug"></e> hlhl<b> <e on="test" do="debug"></e> </b> </li> <exec> <!-- Контейнером начала распространения события сделаем родителя с классом .special --> <dispatch e="test" f=".special"></dispatch> <dispatch e="test" f=".special" p="global"></dispatch> <dispatch e="test" f=".special" p="parent"></dispatch> <dispatch e="test" f=".special" p="childNodes"></dispatch> <dispatch e="test" f=".special" p="childNodes,b,.special"></dispatch> </exec> </ul> </li> hlhl<li> <e on="test" do="debug"></e> </li> </ul> </div> <exec> <!-- Сделаем началом распространения события контейнер #listItem --> <dispatch e="test" f="#listItem"></dispatch> <dispatch e="test" f="#listItem" p="global"></dispatch> <dispatch e="test" f="#listItem" p="parent"></dispatch> <dispatch e="test" f="#listItem" p="childNodes"></dispatch> <dispatch e="test" f="#listItem" p="childNodes,b,.special"></dispatch> </exec> hlhlhl<div class="container_2"> <e on="test" do="debug"></e> <e hlhlglobal on="test" do="debug"></e> hlhl<ul> <e on="test" do="debug"></e> hlhl<li> <e on="test" do="debug"></e> hlhl<b> <e on="test" do="debug"></e> </b> </li> hlhl<li id="listItem"> <e on="test" do="debug"></e> hlhl<ul> <e on="test" do="debug"></e> <!-- Эти диспатчеры не вызываются, а только инициализируются --> hlhl<dispatch id="d1" e="test" f=".container_2"></dispatch> hlhl<dispatch id="d2" e="test" f=".container_2" p="global"></dispatch> hlhl<dispatch id="d3" e="test" f=".container_2" p="parent"></dispatch> hlhl<dispatch id="d4" e="test" f=".container_2" p="childNodes"></dispatch> hlhl<dispatch id="d5" e="test" f=".container_2" p="childNodes,b,.special"></dispatch> hlhl<li> <e on="test" do="debug"></e> hlhl<b class="special"> <e on="test" do="debug"></e> <exec> <!-- Контейнером начала распространения события сделаем родителя с именем LI --> <dispatch e="test" f="li"></dispatch> <dispatch e="test" f="li" p="global"></dispatch> <dispatch e="test" f="li" p="parent"></dispatch> <dispatch e="test" f="li" p="childNodes"></dispatch> <dispatch e="test" f="li" p="childNodes,b,.special"></dispatch> </exec> </b> </li> </ul> </li> hlhl<li> <e on="test" do="debug"></e> </li> </ul> </div> <exec> <!-- Вызываем удаленные диспатчеры --> <dispatch use="d1"></dispatch> <dispatch use="d2"></dispatch> <dispatch use="d3"></dispatch> <dispatch use="d4"></dispatch> <dispatch use="d5"></dispatch> </exec> </div>