Меню
Что нового?

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

Ashotovich

Ashotovich

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

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

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

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

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

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

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

-~{}~ 25.04.08 15:11:

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

-~{}~ 25.04.08 15:11:

а как в цсс - так нельзя сделать
Нажмите для раскрытия...
Тоже вариант. Одно пугает - в JS пробегать по таблице из 1000 строк - дело не самое шустрое, особенно если у клиента комп типа PIII 500. Может и вспучить.
 
а его не вспучит от того что когда он по такой таблице мышой водит у него onMouseover, onMouseout запускаться на каждом ряду будет??? надо головой думать, а не седалищем
 
открой для себя мир jQuery :

$('.myclass').click('runFunctionOne')
.mouseover('runFunctionTwo')
.mouseout('runFunctionThree');
 
Не holly-war-а ради, а в дополненние к ответу Long добавлю ещё пример на Prototype.js

$$('.yourclass').each(function(it){
Event.observe(it, 'click', clickFunctionName)
Event.observe(it, 'mouseover', mouseoverFunctionName)
Event.observe(it, 'mouseout', mouseoutFunctionName)
})
 
Long voituk
т.е. это всё не будет обходить все элементы, а божественным чудом сразу повесит обработчики?
 
Автор оригинала: berkut
а его не вспучит от того что когда он по такой таблице мышой водит у него onMouseover, onMouseout запускаться на каждом ряду будет??? надо головой думать, а не седалищем
Нажмите для раскрытия...
А нефиг где ни попадя мышой водить! :) Да и не по 1000 строк же он будет шарить - с десяток, не более мышью зацепит.

-~{}~ 25.04.08 14:51:

2 Long, voituk

Да хорошие штуки эти чужеземные библиотеки, но уж больно здоровенные с силу своей универсальности. А у меня каждый килобайт на счету, тут без изобретения велосипеда не обойтись. ;)
 
berkut точно таким же чудесным образом, как простой код <? phpinfo(); ?> сгенерирует целую страницу ;)
но с 99% вероятности это будет работать быстрее чем самописный велосипед + читаемый код (или шаблонизаторы тоже "фу", потому что они явно вносят задержки в построение страницы?)
 
Long
точно таким же чудесным образом, как простой код <? phpinfo(); ?> сгенерирует целую страницу
Нажмите для раскрытия...
бредятина. phpinfo() функция языка, $('.myclass').click('runFunctionOne') - "функция" написаная на этом языке, которая также будет обходить весь список элементов и цепляться к каждому.
 
berkut, скажи, а ты для ускорения работы кода не используешь функции (потери на вызовы, ага)? и наверняка даже не разбиваешь проект на отдельные файлы? про шаблонизаторы я уже спрашивал.
есть замечательное правило - не пытайся оптимизировать там, где ты не померял выгоду, тем более не пытайся оптимизировать то, что еще не написано.
 
я ничего не говорил о целесообразности отимизации. я лишь спросил: это не будет обходить все элементы? ты ответил: нет, цепляет чудом. я сказал что ты бредишь. я ниразу не сказал, что фреймворки зло и тормоза и тем более в этом случае

-~{}~ 25.04.08 20:10:

я без прототайпа теперь жить немогу
 
И все-таки можно обойтись без фреймворков и построчного присвоения обработчиков событий.
Вот код, совместим с 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>
 
Одно пугает - в JS пробегать по таблице из 1000 строк - дело не самое шустрое, особенно если у клиента комп типа PIII 500. Может и вспучить.
Нажмите для раскрытия...
ыы) а ничо шо обработчикИ дёргаются на вообще любом элементе документа???? пробежать по 1000 элементам - вспучит, а любое движение мыши в окне, вызывающее 3 обработчика - это значит херня.
 
Обработчику можно условий понавешать. А менять после загрузки страницы код каждого тега через innerHTML, или присваивать по три обработчика, в реальной жизни очень тормозит. Сама сраница может выводиться по 5 минут, а тут - вывод сразу, главное потом мышью не шуршать слишком активно. :)

-~{}~ 01.05.08 14:44:

Да, в IE у меня почему-то конструкция tr.onclick="functionName(this)" вызывала "неопознанную ошибку" (в FF все было ок).
 
А менять после загрузки страницы код каждого тега через innerHTML
Нажмите для раскрытия...
нахрена innerhtml? el.onclick= - тоже самое что у тебя сейчас, только не для всего документа, а для нужных элементов.
Обработчику можно условий понавешать.
Нажмите для раскрытия...
и чё? они-же у тебя сейчас вызываются на абсолютно всех элементах и ещё условия проверяются.
главное потом мышью не шуршать слишком активно.
Нажмите для раскрытия...
это из серии резать кавычки, запятые и скобки из всех пришедших данных, шоб от инъекций защитится.
кароче ты не ведаешь, что твориш.
 
вот именно, что обходить 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(){.....});
  
});
 
Войдите или зарегистрируйтесь для ответа.
Сверху