Присвоение свойств onClick, onMouseover и пр. группе (классу) объектов

[Ashotovich]

Присвоение свойств onClick, onMouseover и пр. группе (классу) объектов

Всем доброго дня.

Столкнулся со следующей проблемой. Есть таблица. Каждой строке в этой таблице присвоен ряд ствойств:
<tr id="1" onClick="runFunctionOne(this)" onMouseover="runFunctionTwo(this)" onMouseout="runFunctionThree(this)">

Все бы ничего, но проблема в том, что таких строк может быть и 1000. Соответственно, код страницы становится жирным как боров.

Вопрос: возможно ли объявить свойства onClick, onMouseover и пр. группе (классу) объектов? Тогда каждая строка была бы похожа на
<tr id="1" class="myclass">, а все обработчики событий описывались в свойствах класса (стили же можно так описывать).

Пожалуйста, подскажите.

Заранее благодарю.

 

[berkut]

так получай все ряды и в цикле вешай на них обработчики. типо <table id="myTbl"><tr>
document.getElementById('myTbl').getElementsByTagName('tr')

-~{}~ 25.04.08 15:11:

а как в цсс - так нельзя сделать

 

[Ashotovich]

Автор оригинала: berkut
так получай все ряды и в цикле вешай на них обработчики. типо <table id="myTbl"><tr>
document.getElementById('myTbl').getElementsByTagName('tr')

-~{}~ 25.04.08 15:11:

а как в цсс - так нельзя сделать

Тоже вариант. Одно пугает - в JS пробегать по таблице из 1000 строк - дело не самое шустрое, особенно если у клиента комп типа PIII 500. Может и вспучить.

 

[berkut]

а его не вспучит от того что когда он по такой таблице мышой водит у него onMouseover, onMouseout запускаться на каждом ряду будет??? надо головой думать, а не седалищем

 

[Long]

открой для себя мир jQuery :

$('.myclass').click('runFunctionOne')
.mouseover('runFunctionTwo')
.mouseout('runFunctionThree');

 

[voituk]

Не holly-war-а ради, а в дополненние к ответу Long добавлю ещё пример на Prototype.js

$$('.yourclass').each(function(it){
Event.observe(it, 'click', clickFunctionName)
Event.observe(it, 'mouseover', mouseoverFunctionName)
Event.observe(it, 'mouseout', mouseoutFunctionName)
})

 

[berkut]

Long voituk
т.е. это всё не будет обходить все элементы, а божественным чудом сразу повесит обработчики?

 

[Ashotovich]

Автор оригинала: berkut
а его не вспучит от того что когда он по такой таблице мышой водит у него onMouseover, onMouseout запускаться на каждом ряду будет??? надо головой думать, а не седалищем

А нефиг где ни попадя мышой водить! Да и не по 1000 строк же он будет шарить - с десяток, не более мышью зацепит.

-~{}~ 25.04.08 14:51:

2 Long, voituk

Да хорошие штуки эти чужеземные библиотеки, но уж больно здоровенные с силу своей универсальности. А у меня каждый килобайт на счету, тут без изобретения велосипеда не обойтись.

 

[Long]

berkut точно таким же чудесным образом, как простой код <? phpinfo(); ?> сгенерирует целую страницу
но с 99% вероятности это будет работать быстрее чем самописный велосипед + читаемый код (или шаблонизаторы тоже "фу", потому что они явно вносят задержки в построение страницы?)

 

[berkut]

Long

точно таким же чудесным образом, как простой код <? phpinfo(); ?> сгенерирует целую страницу

бредятина. phpinfo() функция языка, $('.myclass').click('runFunctionOne') - "функция" написаная на этом языке, которая также будет обходить весь список элементов и цепляться к каждому.

 

[Long]

berkut, скажи, а ты для ускорения работы кода не используешь функции (потери на вызовы, ага)? и наверняка даже не разбиваешь проект на отдельные файлы? про шаблонизаторы я уже спрашивал.
есть замечательное правило - не пытайся оптимизировать там, где ты не померял выгоду, тем более не пытайся оптимизировать то, что еще не написано.

 

[berkut]

я ничего не говорил о целесообразности отимизации. я лишь спросил: это не будет обходить все элементы? ты ответил: нет, цепляет чудом. я сказал что ты бредишь. я ниразу не сказал, что фреймворки зло и тормоза и тем более в этом случае

-~{}~ 25.04.08 20:10:

я без прототайпа теперь жить немогу

 

[Long]

berkut, я понимаю - пятница, тяжелая рабочая неделя...

 

[Ashotovich]

И все-таки можно обойтись без фреймворков и построчного присвоения обработчиков событий.
Вот код, совместим с IE и FF:

<style>
.p {background-color:#aaddff;}
.phl {background-color:#88bbee;}
</style>

<html>
<body>

<table border="0" cellspacing="0" cellpadding="10" style="cursor: hand;cursor: pointer;">
<tr id="10001" class="p"><td>Жил был на свете кадет.</td></tr>
<tr id="10002" class="p"><td>В красную шапочку кадет был одет.</td></tr>
<tr id="10003" class="p"><td>Кроме этой шапочки, доставшейся кадету,</td></tr>
<tr id="10004" class="p"><td>ни черта в нем красного не было и нету.</td></tr>
<tr id="10005" class="p"><td>Услышит кадет - революция где-то,</td></tr>
<tr id="10006" class="p"><td>шапочка сейчас же на голове кадета.</td></tr>
</table>

</body>
</html>

<script language="JavaScript" type="text/javascript">

d = document;
if (navigator.appName == "Netscape") browser = "N";
else if (navigator.appName == "Microsoft Internet Explorer") browser = "IE";

function Hl(t) {if (t.className=="p") t.className="phl";}

function Ll(t) {if (t.className=="phl") t.className="p";}

d.onclick = function(e) {
if (browser == "IE") {var e=event; var o=e.srcElement;}
if (browser == "N") {var o=e.target;}
var tr=o.parentNode;
alert(tr.id);
}

d.onmouseover = function(e) {
if (browser == "IE") {var e=event; var o=e.srcElement;}
if (browser == "N") {var o=e.target;}
var tr=o.parentNode;
Hl(tr);
}

d.onmouseout = function(e) {
if (browser == "IE") {var e=event; var o=e.srcElement;}
if (browser == "N") {var o=e.target;}
var tr=o.parentNode;
Ll(tr);
}

</script>

 

[berkut]

Одно пугает - в JS пробегать по таблице из 1000 строк - дело не самое шустрое, особенно если у клиента комп типа PIII 500. Может и вспучить.

ыы) а ничо шо обработчикИ дёргаются на вообще любом элементе документа???? пробежать по 1000 элементам - вспучит, а любое движение мыши в окне, вызывающее 3 обработчика - это значит херня.

 

[Ashotovich]

Обработчику можно условий понавешать. А менять после загрузки страницы код каждого тега через innerHTML, или присваивать по три обработчика, в реальной жизни очень тормозит. Сама сраница может выводиться по 5 минут, а тут - вывод сразу, главное потом мышью не шуршать слишком активно.

-~{}~ 01.05.08 14:44:

Да, в IE у меня почему-то конструкция tr.onclick="functionName(this)" вызывала "неопознанную ошибку" (в FF все было ок).

 

[berkut]

А менять после загрузки страницы код каждого тега через innerHTML

нахрена innerhtml? el.onclick= - тоже самое что у тебя сейчас, только не для всего документа, а для нужных элементов.

Обработчику можно условий понавешать.

и чё? они-же у тебя сейчас вызываются на абсолютно всех элементах и ещё условия проверяются.

главное потом мышью не шуршать слишком активно.

это из серии резать кавычки, запятые и скобки из всех пришедших данных, шоб от инъекций защитится.
кароче ты не ведаешь, что твориш.

 

[-SkyNet-]

вот именно, что обходить 1000строк программно дело не совсем благодарное.

для этого умные люди придумал jQuery и плагины, которые подсвечивают, скажем, пхп-код в 10000строк за какие-то жалкие миллисекунды

в конкретном случае, целесообразна конструкция типа

html:

<table id='mytable'><tr><td id='1'>aaa</td></tr>
<tr><td id='2'>bbb</td></tr>
<tr><td id='3'>ccc</td></tr></table>

jQuery:

$("#mytable td").each(function(){
  $(this).bind('click',function(){
    var _this=$(this).get(0);//ссылка на DOM-объект
    onClickFunction(_this);
  }).bind('mouseover',function(){.....});
  
});