Task 1: Events
<header rel="js-header">
<div class="logo">My Cool Page</div>
<div class="controls" rel="js-controls">
<a href="register.html" rel="nofollow js-register">register</a> |
<a href="login.html" rel="nofollow js-login">login</a>
</div>
</header>
He will use the js-controls
to find his elements and uses event bubbling (second parameter to .click
to limit clicks to these elements with jQuery)
$(document).ready(function(){
$("[rel=js-controls]").on("click","> [rel^=js]",function(evt){
evt.preventDefault();
evt.stopPropagation();
evt.stopImmediatePropagation();
// ..
});
});
Event management, to stop bubbling:
evt.preventDefault();
evt.stopPropagation();
evt.stopImmediatePropagation();
Only the first is necessary here. The other two are just by habit.