JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://evejs.com/stable/eve.js"></script>
<div class="list-module">
This is list module one.
<div class="child_area">
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
</ul>
</div>
</div>
<hr/>
<div class="list-module">
This is list module two.
<div class="child_area">
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
</ul>
</div>
</div>
<hr/>
<div class="other-module">
This is a different module.
<div class="child_area">
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
</ul>
</div>
</div>
CSS
.active { color: red; }
JavaScript
Eve.debug();
Eve.register('rot13', function(ns) {
function rot13(e) {
var el = e.target;
el.innerHTML = el.innerHTML.replace(/[a-zA-Z]/g, function(c) {
return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
});
};
this.listen('ul li', 'mouseover', rot13);
this.listen('ul li', 'mouseout', rot13);
});
Eve.register('active', function() {
this.listen('click', function(e) {
this.find('.active').removeClass('active');
this.find(e.target).addClass('active');
});
});
Eve.attach('active', '.list-module ul');
Eve.attach('rot13', '.list-module');
Eve.scope('.other-module', function() {
this.listen('ul', 'click', function(e) {
console.log("Inner module click!");
});
this.attach('rot13');
});