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

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

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

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

Javascript

$(document).ready(function(){
 
$('td').on('click',function(event){
var x =$(this).text();
alert(x);
});
 
});

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

Javascript

$(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

<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 в данном контексте должны не зависеть от табиндекса. Странно..

@koza4ok 632 / 440 / 67 Регистрация: 19.09.2012 Сообщений: 1,632
	16.09.2013, 15:17	2
	http://learn.javascript.ru/focus-blur По умолчанию не все элементы поддерживают эти события. Перечень элементов немного рознится от браузера к браузеру, например, список для IE описан в MSDN. Но есть элементы, которые поддерживают фокусировку всегда. В первую очередь это те, c которыми посетитель может взаимодействовать: INPUT, SELECT, A и т.п. С другой стороны, элементы для форматирования, такие как DIV, SPAN, TABLE и другие — по умолчанию не поддерживают это событие, т.е. на них нельзя «фокусироваться». Впрочем, существует способ включить фокусировку и для них. 1

	16.09.2013, 20:08