2013-07-02 3 views
3

Мне нужно передать объект события и объект возникновения события в функцию обработки. Я считаю, что я понимаю, как внешний Javascript работы:Как браузер обрабатывает встроенные события javascript?

<input id="input2"/> 
<script> 
function getKey2(e) { alert(this.id+e.keyCode); } 
document.getElementById("input2").onkeypress = getKey2; 
</script> 

OnKeyPress метод определяется на Input2 DOM, поэтому этот указывает на него и объект события передается в качестве первого аргумента функции. Но я путать с рядный Javascript:

<input id="input1" onkeypress="getKey1(this,event)"/> 
<script> 
function getKey1(obj,e) { 
    alert(obj.id+e.keyCode); 
} 
</script> 

Первый аргумент, это, должно быть Window объект, но когда он копируется в OBJ на события, это объект события происхождения , input1 от DOM. Второй аргумент, событие, должен быть глобальным объектом события, но при вызове объект события передается функции. Видимо, моя дедукция неверна - как работает звонок?

Короче говоря: почему значения объектов в следующих символах не совпадают?

   | name object value 
---------------------------------- 
in onkeypress | this Window 
in getKey1 | obj DOM input1 


       | name object value 
---------------------------------- 
in onkeypress | event global event 
in getKey1 | e  keypress event 

fiddle here

+0

Поскольку браузеры могут связывать правильные значения? –

+0

@DaveNewton сарказм? Я знаю, что это самые основы Javascript, но браузеры связывают любые другие значения? Есть ли какой-либо стандарт, описывающий это? –

+0

Это не сарказм, так оно и работает. Вы устанавливаете обработчик событий для определенного элемента DOM. Это строка, нет причин, чтобы «это» и «событие» не были связаны правильно. Это не выполняется * при анализе DOM. –

ответ

6

Спецификация W3C DOM утверждает два привязок для встроенные события:

  1. this связан с элементом , на которой инлайн событие было определено;
  2. Введена локальная переменная с именем event. (IE не делает этого, но тот же синтаксис работает для инлайн события, потому что event будет рассматриваться как window.event в IE.)

В HTML5 информация погребены под 6.1.6.1 Event handlers. Эти две части разложены:

Когда атрибут контента обработчик события установлен [то есть, когда инлайн событие установлено] .. Пусть тело [синтезированного при объявлении функции] является обработчик события атрибут контент-новый value .. Пусть функция имеет один аргумент, называемый событием. [Обратите внимание, что onerror является особенным.]

.. Пусть Scope [или this] является результатом NewObjectEnvironment (объекта элемента, Scope). [Это связано с другими средами среды, такими как форма (если она существует) и глобальный контекст.]

+1

Не могли бы вы добавить ссылку на соответствующую часть спецификации W3C DOM? Я не могу найти его. –

+0

@ JanTuroň Обновлено. Мне потребовалось немного времени, чтобы извлечь из спецификации HTML5. Это было гораздо более кратко сформулировано в старой спецификации HTML4. Даже получил шанс исправить мои знания. – user2246674

+0

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

1

нет, это будет объект DOM, на котором срабатывает событие, в данном случае <input> были OnKeyUp атрибут был установлен и где браузер будет найти обработчик.

Мы будем играть немного больше с этими событиями: http://jsfiddle.net/nFfEp/

Для лучшего понимания о событии запуска и обработки это очень полезный документ: http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

Смежные вопросы