работа функции без onClick

[Yahoo!]

Как сделать, что б функция работала без onClick в элементе. Допустим есть список с каким-либо классом или IDом и нужно чтоб при клике на LI в этом списке срабатывала эта функция, заведомо в <li onclick="..."> не писать. В jQuery это вроде проще простого делается.

[Zippovich]

ну так пользуйте jQuery, вешайте эвент на клик и будет Вам счастье.

[rus]

Как сделать, что б функция работала без onClick в элементе. Допустим есть список с каким-либо классом или IDом и нужно чтоб при клике на LI в этом списке срабатывала эта функция, заведомо в <li onclick="..."> не писать. В jQuery это вроде проще простого делается.

А что нужно то?

Открытие-закрытие списка?

[Yahoo!]

Ну примерно это, охото и без jQuery и чистый HTML добавить =) .

[Zippovich]

напишите так же функцию JS на чистом HTML )

[Great Rash]

Копайте в сторону addEventListener для браузеров и attachEvent для ИЕ.

[rus]

Тут у Влада лежал исходник на этом сайте:

js

/** 
 * Необходимо сделать предварительную загрузку изображений, 
 * которые будут использоваться в качестве "открывашек"
 * (как правило, это бывают изображения плюс и минус).
 * Эти переменные будут использоваться в функции switchDisplay 
 * для смены изображений.
 */

var openedImg = new Image,
	closedImg = new Image;

openedImg.src = '';
closedImg.src = '';

/**
 * attachHandler - функция, предназначенная для регистрации 
 * обработчиков событий. Если браузер не поддерживает методы 
 * регистрации, то скрипт просто не будет загружен.
 */

function attachHandler(aObj, aEvent, aFunc) { 
	aObj.attachEvent
	? aObj.attachEvent(('on' + aEvent), aFunc)
	: (aObj.addEventListener
	  ? aObj.addEventListener(aEvent, aFunc, false)
	  : '');
}

/**
 * initList - функция инициализации списка.
 * Получает в качестве параметров id списка и тэг, который будет 
 * обрабатывать событие onclick для открытия дополнительных 
 * пунктов списка (в данном примере используются тэги <a>&<img>)
 *
 * Основная задача этой функции - "пробежаться" по всем пунктам 
 * списка и найти среди них те, в которые вложены дополнительные 
 * списки. В случае (условие if (list)), если у пункта есть 
 * вложенный список, на один из вложенных элементов (opener - 
 * тэги <a>&<img>) будет "повешен" обработчик события onclick 
 * (функция switchDisplay) при помощи функции attachHandler.
 */

function initList(aId, aTag) {
	var items = document.getElementById(aId)
						.getElementsByTagName('li'),
		list, opener;
	for (var i = 0, l = items.length; i < l; i++) {
		list = items[i].getElementsByTagName('ul')[0];
		if (list) {
			opener = items[i].getElementsByTagName(aTag)[0];
			opener.list = list;
			attachHandler(opener, 'click', switchDisplay);
		}
	}
}

/**
 * switchDisplay - функция, вызываемая в момент наступления события 
 * onclick. В случае, если в качестве "открывашек" были выбраны 
 * изображения, эта функция укажет для них новый адрес (используются 
 * предварительно загруженные изображения). Основная задача - менять 
 * поочередно значение свойства display вложенного списка. Функция 
 * также осуществляет отмену действия, происходящего по умолчанию для 
 * события onclick - это имеет смысл в случае, если "открывашками" 
 * выбраны тэги <a>.
 */

function switchDisplay(aEvent) {
	var el = aEvent.target || aEvent.srcElement;
	if (el.tagName.toLowerCase() == 'img') {
		el.src = (el.src == closedImg.src)
				 ? openedImg.src
				 : closedImg.src;
	}
	el.list.style.display = (el.opened = !el.opened)
							? 'block'
							: 'none';
	return (aEvent.preventDefault
		   ? aEvent.preventDefault()
		   : (aEvent.returnValue = false));
}

/**
 * onLoad - функция, вызываемая в момент загрузки документа и 
 * позволяющая вызывать функции initList для инициализации списков, 
 * передавая им необходимые параметры. Эта функция необходима лишь в 
 * том случае, если требуется обрабатывать несколько списков. 
 * Если сценарий работает с одним списком, id и тэг можно указать 
 * непосредственно в теле функции initList, не прибегая к 
 * использованию аргументов. Загрузка тогда будет выглядеть так: 
 * attachHandler(window, 'load', onLoad).
 */

function onLoad() {
	initList('list2', 'a');
	initList('list', 'img');
} 

attachHandler(window, 'load', onLoad);

css

.list {
  width:auto; 
  padding:0px;
  float:left; 
  margin-left:0px;
} 

.list ul { 
  list-style:none; 
  margin-left:5px; 
  padding:0; 
} 

.list li { 
  padding:5px; 
}
/*
.list li img {
  width:11px;
  margin:0 2px 0 -13px;
  cursor:pointer;
}
*/
.list li img {
  border:none;
}
.list li a {
font: bold 12px Verdana;
color:#009BDE;
text-decoration:none;
} 

.list li ul { 
  display:none;
}

.list ul li ul li { 
  font-size:90%; 
  border-left:1px dotted #3E73C8; 
}
.list ul li h1 {
font: bold 14px Verdana;
color:#0053A0;
text-decoration:none;
}

.list ul li h2 {
text-align:center;
font: bold 14px Verdana;
color:#0053A0;
text-decoration:none;
}

html

<div class="list">
<ul id="list2">
<li class="parent"><a href="#"><a href="#">ссылка</a>
<ul>
<li class="parent">текст</li>
</ul>
</li>
<li class="parent"><a href="#">ссылка</a>
<ul>
<li class="parent">текст</li>
</ul>
</li>
</ul>
</div>