How does browser handle inline javascript events?

Question

I need to pass event object and event origin object to handling function. I believe I understand how external JavaScript works:

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

The onkeypress method is defined on input2 DOM, so this points to it and event object is passed as the first argument to the function, but I am confused with inline JavaScript:

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

The first argument, this, should be Window object, but when it is copied to obj on the event, it is event origin object, the input1 from DOM. The second argument, event, should be global event object, but when called, event object is passed to the function. Apparently, my deduction is wrong - how does the call work?

Long story short: why the object values in the following chars are not the same?

              | 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

@DaveNewton sarcasm? I know this is the very basics of Javascript, but do browsers bind any other values? Is there any standard describing it? — Jan Turoň
– Jan Turoň, Commented Jul 2, 2013 at 16:12
It's not sarcasm, it's how it works. You're setting an event handler on a specific DOM element. It's a string, there's no reason this and event wouldn't be bound correctly. It's not being executed when the DOM is parsed. — Dave Newton
– Dave Newton, Commented Jul 2, 2013 at 16:14
@DaveNewton that makes a sense. However, HOW it is parsed? Is there anything else bound? — Jan Turoň
– Jan Turoň, Commented Jul 2, 2013 at 16:30

Community · Accepted Answer · 2020-06-20 09:12:55Z

6

The W3C DOM specification states two bindings for inline events:

this is bound to the element upon which the inline event was defined;
A local variable with the name event is introduced. (IE doesn't do this but the same syntax works for inline event because event will be treated as window.event in IE.)

In HTML5 the information is buried under 6.1.6.1 Event handlers. The two parts are spread out:

When an event handler content attribute is set [that is, when an inline event is set] .. Let body [of the synthesized function declaration] be the event handler content attribute's new value .. Let the function have a single argument called event. [Note that onerror is a special.]

.. Let Scope [or this] be the result of NewObjectEnvironment(the element's object, Scope). [This is chained with other environment contexts such as the Form (if it exists) and the Global Context.]

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 2, 2013 at 16:16

user2246674

7,72927 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jan Turoň Over a year ago

Can you please add a link to the relevant part of W3C DOM specification? I can't find it.

user2246674 Over a year ago

@JanTuroň Updated. It took me a bit to extract from the HTML5 spec. It was much more tersely worded in the older HTML4 spec. Even got a chance to fix my knowledge ..

Jan Turoň Over a year ago

It seems to be a correct answer. Just give me a while to study the link before accepting it.

Victor Zamanian Over a year ago

Is there a particular reason for linking to the HTML5.1 spec? I ask, because the same phrasing is already in the older HTML5 spec.

Edorka · Accepted Answer · 2013-07-02 16:19:22Z

1

no, this will be the dom object on which the event was triggered, in this case the <input> were the onkeyup attribute was set and where the browser will find a handler.

We are going to play a little more with those events: http://jsfiddle.net/nFfEp/

For better understanding about the event triggering and handling this is a very useful document: http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

edited Jul 2, 2013 at 16:19

answered Jul 2, 2013 at 16:12

Edorka

1,81113 silver badges25 bronze badges

Collectives™ on Stack Overflow

How does browser handle inline javascript events?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related