Есть ли возможность вынести javascript события типа onclick

← →
Иксик © (2009-11-02 17:49) [0]

Т.е. не обработчик вынести (это элементарно), а объявление, например в стили? Имеется огромная таблица и у каждой ячейки один и тот же onclick=функция(this) и это увеличивает размер страницы страшно.

Вот и возник вопрос.

← →
Gero © (2009-11-02 17:51) [1]

Конечно. Только не в стили, а в скрипты.

object.onclick = function(){
}

← →
Иксик © (2009-11-02 18:09) [2]

А что пишется в object? Я хочу сказать, для каждой ячейки эту строку писать? Если да, то экономии не получается.

← →
Иксик © (2009-11-02 18:11) [3]

А, понял, можно написать обработчик onload и там каждой ячейке присвоить onclick.

Спасибо!

← →
wicked © (2009-11-02 19:03) [4]

а если используется jquery, то присвоение обработчика можно сделать одной строчкой, и даже в css стиле

← →
sniknik © (2009-11-02 19:25) [5]

> А, понял, можно написать обработчик onload и там каждой ячейке присвоить onclick.
вообще можно сделать onclick на таблицу, а уже в событии определять на какой ячейке реально "кликнули". ну, думаю, должно получится.

← →
Иксик © (2009-11-02 23:48) [6]

sniknik © (02.11.09 19:25) [5]

> А, понял, можно написать обработчик onload и там каждой ячейке присвоить onclick.
вообще можно сделать onclick на таблицу, а уже в событии определять на какой ячейке реально "кликнули". ну, думаю, должно получится.

А как? Javascript не моя сильная сторона :)

← →
Иксик © (2009-11-02 23:49) [7]

> wicked © (02.11.09 19:03) [4]

Я столько замечательного про него слышал... У вас есть какая-нибудь хорошая ссылка для начинающих? :)

← →
sniknik © (2009-11-03 00:00) [8]

> А как?
ну например
$("#t-filter-body").click(function(e) { e.stopPropagation(); switch(e.target.tagName) { case "A": sServer = jQuery(e.target).attr("hash").slice(1); sUnic = ""; $("#hardCapt").html("< Сервер : "+sServer+" >"); if (greedOpen) updateGrid() break; case "IMG": sServer = ""; sUnic = jQuery(e.target).parent().attr("hash").slice(1); $("#hardCapt").html("< Устройство : "+sUnic+" >"); if (greedOpen) updateGrid() break; } e.preventDefault(); return false; });

> Javascript не моя сильная сторона :)
ну да, а я прям родился со знанием Javascript...

> хорошая ссылка для начинающих? :)
http://jquery.com/

← →
Иксик © (2009-11-03 00:24) [9]

> sniknik © (03.11.09 00:00) [8]

Спасибо, буду копать!

← →
М. Береговой (2009-11-03 00:32) [10]

Можно еще проще:
1. Присваиваем id каждому элементу TD таблицы: id="1.1.cell", id="1.2.cell", id="1.3.cell"... Важно, чтобы они не повторялись и чтоб имели общую метку. В данном случае ".cell".

2. Создаем объект в криптовом файле .js и ловим события документа:
function MyObject(group_id){ //ловим элемент на котором произошло событие function getTarget(e) { var event = e || window.event; var target = event.target || event.srcElement; if (target.id) { if (target.id.indexOf(group_id) > -1) return target; else return null; } else return null; } //если элемент наш, то делаем чего нам надо function numberKey(e) { var el = getTarget(e); if (el) { //делаем чего надо здесь } } //подключаем собтие, которое надо словить if (doc.addEventListener) {doc.addEventListener("keypress", numberKey, false);} else if (doc.attachEvent) {doc.attachEvent("onkeypress", numberKey);} else {doc.onkeypress = numberKey;} }

в HTML пишем:
var blahblah = new MyObject(".cell");
group_id - указываем id признак общий для всех ячеек (которая в примере ".cell")...

← →
М.Береговой (2009-11-03 00:36) [11]

Пропустил одну строчку перед поключением события: var doc = document;

> Присваиваем id каждому элементу TD таблицы: id="1.1.cell",
> id="1.2.cell", id="1.3.cell"...

проще уж onclick

имхо id="table1" у таблицы и

var td = document.getElementById("table1").getElementsByTagName("td");
for(var i=0; i<td.length; i++) {
td[i].onclick = my_function;
}

Иксик © (02.11.09 23:49) [7]
Боюсь, что вас введет в заблуждение пост
sniknik © (03.11.09 00:00) [8]
Javascript соотносится с jQuery примерно также как язык Pascal с библиотекой VCL. Т. е. сначала надо освоиться со средствами языка Javascript, потом решить, будете ли вы применять jQuery и уж потом разбираться с jquery.com

Хотя конечно jQuery очень удобная кроссбраузерная библиотека. И книжек по ней довольно много можно скачать. Одну книгу даже на русский недавно перевели.

Дмитрий С © (03.11.09 07:54) [12]
> проще уж onclick
естественно проще, но для варианта с громоздкой структурой это дополнительные тормоза, на разбор.
у меня например есть дерево из 6000 элементов, загружается и парсится оно десятую долю секунды, т.е. мизер (почему и не стал делать позднюю подгрузку веток, и серверу проще отдать сразу все, без дерганий его мелкими запросами.) но стоило только добавить в каждый элемент онклик... (или длинный href) как добавляется "тормоз" в примерно секунду-полторы.
лучше уж так "сверху" обработку клика наложить, и ссылку формировать, чем такие тормоза, человек все одно не сможет кликать с такой скоростью...
а уж добавлять на клиенте... ну не знаю, надо попробовать но думаю секундой не обойдешься. ИМХО это только для маленьких наборов приемлемо. (у меня даже мыслей так делать не было)

М. Береговой (03.11.09 00:32) [10]
> Можно еще проще:
чего же проще? там у меня много написано, т.к. делаются другие вещи, а если свести к поиску нужного тега на какой кликнули, т.е. то что у тебя то весь код будет jQuery(e.target), ну или $(e.target).
именно для того эти библиотеки и нужны, чтобы упростить, и было бы совсем неправильно если бы на "чистом" яваскрипте вдруг оказалось проще.

вот если убрать лишнее
$("#xxxx").click(function(e) { var el $(e.target); if (el) { //делаем чего надо здесь } });
вот, это уже с "навеской" события.
вообще то тут даже проверка лишняя, если не важно по чему кликнули, а если важно то поставить вместо нее проверку на тип тега/имя/класс... неважно что, определить по чему клик. т.е. не вводить искусственные id="1.3.cell" а выбирать все таги "td", или если нам нужна только часть из них ввести класс "forclick" и определять по нему.

> также как язык Pascal с библиотекой VCL.
и большинство сейчас начинает именно с VCL в дельфи. (хотя не скажу чтобы это было хорошо)

> и уж потом разбираться с jquery.com
я учил параллельно, + еще пробовал прототайп (его мне усиленно рекомендовал начальник, т.к. сам пользует его), на предмет "а на чем же у меня будет окончательный вариант", jquery выиграл в этом личном соревновании.

← →
М. Береговой (2009-11-03 19:33) [16]

> sniknik © (03.11.09 09:47) [14]

спорить не буду - у тебя короче выходит, но надо знать JQuery, а в моем не надо. Оба варианта подходящие.

Есть ли возможность вынести javascript события типа onclick Найти похожие ветки