Кроссбраузерный .addEventListener
HTML
Клик на элементе выделяет только его.
<br> Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.
<br> Shift+Клик добавляет промежуток от последнего кликнутого к выделению.
<br>
<ul id='ul'>
<li>Кристофер Робин</li>
<li>Винни-Пух</li>
<li>Ослик Иа</li>
<li>Мудрая Сова</li>
<li>Кролик. Просто кролик.</li>
</ul>
CSS
.selected {
background: #0f0;
}
li {
cursor: pointer;
}
JavaScript
function addEvent(evnt, elem, func) {
elem.addEventListener ? elem.addEventListener(evnt,func,false) : elem.attachEvent("on"+evnt, func);
}
addEvent('DOMContentLoaded', document, function () {
alert('hi');
var ul = document.getElementsByTagName('ul')[0];
addEvent('click', ul, function(e){
var target = e.target;
while(target != this){
if(target.tagName == "LI"){
target.classList.toggle('selected');
}
return;
}
target = target.parentNode;
});
});