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.js <evejs.com> - Version: 0.2 (April 15, 2012)
*
* A JavaScript meta-framework for scoped event delegation.
*
* Copyright (c) 2012 Michelle Steigerwalt, http://evejs.com/
*
* Permission is hereby granted, free of charge, to any person obtaining
* a copy of this software and associated documentation files (the
* "Software"), to deal in the Software without restriction, including
* without limitation the rights to use, copy, modify, merge, publish,
* distribute, sublicense, and/or sell copies of the Software, and to
* permit persons to whom the Software is furnished to do so, subject to
* the following conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
* LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
* WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
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', ...