А что, если нам нужно добавить такой обработчик на все ссылки (или почти на все)? Правильно: тогда для контейнера всех этих ссылок стоит выбрать document.body
. Ниже приведен пример кода, который позволяет так сделать.
var MenuNavigation = { init: function() { document.body.onclick = function(e) { var target = getEventTarget(e); if ( target && /bundle/i.test(target.className) ) { target.href += '?name=value'; } return true; }; } var getEventTarget = function(e) { var e = e || window.event; var target = e.target || e.srcElement; // боремся с Safari и вложенностью while ( !target.href || target.nodeType == 3 ) { target = target.parentNode; }(); return target; } } window.onload = MenuNavigation.init;
Если мы собираемся обрабатывать все ссылки, то нужно учесть, что в них могут быть вложены и картинки, и другие теги, поэтому добавлено рекурсивное «всплытие» ссылки: проверяется родитель объекта, на котором сработало событие, и если у него не определен атрибут href
, то перебор продолжается, иначе возвращаем искомый объект. Вложение ссылок друг в друга запрещено стандартами, так что если мы сами же проектируем HTML-код, то бояться нечего.