Разница событий event и click

@Сергей1980 · Регистрация: 17.12.2009

Студворк — интернет-сервис помощи студентам

Коллеги, всем привет!
Возник один вопрос по поводу срабатываний событий focus и click.
Представим себе простенькую процедуру, которая на нажатие тега <td> в таблице выводит его содержимое в alert:

JavaScript
1
2
3
4
5
6
7
8
$(document).ready(function(){
 
$('td').on('click',function(event){
var x =$(this).text();
alert(x);
});
 
});

Все отлично работает. click отрабатывает без проблем. Но вот если я пытаюсь поставить фокус в тег <td> аналогичным образом, то почему то функция не отрабатывает:

JavaScript
1
2
3
4
5
6
7
8
$(document).ready(function(){
 
$('td').on('focus',function(event){
var x =$(this).text();
alert(x);
});
 
});

Два вопроса:
1) Почему не работает focus, а click работает?
2) Может ли тег <td> вообще принимать фокус?

Коллеги, прошу по минимуму философии и побольше конкретики.

Я сейчас собираю табличный мини фреймворк, изучаю досконально возможности Jquery. Делаю грид аля эксель /аксесс. (на последнее это предложение комментариев не надо))

@koza4ok · 16.09.2013, 15:17

http://learn.javascript.ru/focus-blur

По умолчанию не все элементы поддерживают эти события. Перечень элементов немного рознится от браузера к браузеру, например, список для IE описан в MSDN. Но есть элементы, которые поддерживают фокусировку всегда. В первую очередь это те, c которыми посетитель может взаимодействовать: INPUT, SELECT, A и т.п.

С другой стороны, элементы для форматирования, такие как DIV, SPAN, TABLE и другие — по умолчанию не поддерживают это событие, т.е. на них нельзя «фокусироваться». Впрочем, существует способ включить фокусировку и для них.

@Сергей1980 · 16.09.2013, 20:08 **[ТС]**

Вот кстати span то и поддерживает фокус что самое странное..если его запихнуть внутрь td, как контейнер, то все работать начинает.
Как понимаю это именно фишка Jquery, а не чистого javascript.
Представьте, что у вас есть некая таблица, любая ,в формате html.
И я хочу чтобы в фокусе на ячейку <td> выводился редактируемый <input> (ну чтобы прямо там можно было все редактировать не отходя от кассы).
Все норма, работает следующая процедура:

JavaScript
1
2
3
4
5
6
7
8
9
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
....
<script type="text/javascript">
$('table').on('focus','td span', function GotFocus(event){
var span=$(this), parent=span.parent();
parent.html('<input type="text" tabindex="1" value=" '+ span.text() +' ">');
parent.children('input').focus();
});
</script>

Заметил интересную и непонятную закономерность, если я tabindex в <span> и <input> добавляю то процедура отлично срабатывает. Как только убираю данный атрибут, то перестает работать. Не могу понять почему. Event и this в данном контексте должны не зависеть от табиндекса. Странно..

Новые блоги и статьи Все статьи Все блоги /
Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .