Фокус события с dispatchEvent - PullRequest
Новая
       22

Фокус события с dispatchEvent

5 голосов
/ 05 июля 2011

Когда я запускаю событие focus с dispatchEvent в поле ввода, вызывается его onfocus, но в пользовательском интерфейсе поле ввода не фокусируется.Есть ли какая-либо причина для такого поведения? 

var test = document.getElementById("test");
test.onfocus = function(event) {
  console.log('focused');
}
var e = document.createEvent('Event');
e.initEvent("focus", true, true);
test.dispatchEvent(e);

С другой стороны, это работает как ожидалось. 

var test = document.getElementById("test");
test.focus();

Причина, по которой я исследую это, заключается в том, что я использую ZeptoJS для запуска событийи он использует dispatchEvent.

1 Ответ

3 голосов
/ 05 июля 2011

Элемент, на котором вы запускаете событие, не должен прослушивать это событие, поскольку потенциально родительский элемент также может прослушивать это событие.

Обратите внимание, что запуск события вручную не генерируетдействие по умолчанию, связанное с этим событием.Например, запуск события focus вручную не приводит к тому, что элемент получает фокус (для этого необходимо использовать его метод focus()), запуск события submit вручную не отправляет форму (используйте метод submit()).), ручное инициирование ключевого события не приводит к тому, что эта буква появляется в фокусированном текстовом вводе, а ручное инициирование события щелчка по ссылке не вызывает активацию ссылки и т. д. В случае событий пользовательского интерфейса это важнопо соображениям безопасности, поскольку он не позволяет сценариям имитировать действия пользователя, которые взаимодействуют с самим браузером.

Также обратите внимание, что вы должны использовать fireEvent(), если вы работаете в IE.Кроме того, основное различие между методами dispatchEvent и fireEvent заключается в том, что метод dispatchEvent вызывает действие по умолчанию для события, а метод fireEvent - нет.

, поэтому для решения попробуйтеэто 

test.onfocus = function(event) {
  console.log('focused');
  if( ! test.hasFocus() ) {
    test.focus();
  }
}
...