passing this object as argument in onChange event?

Question

I want to make an eventHandler that passes "this" object as parameter. I tried this

 <select id="customer" onchange="custChange(this);">

it works fine and get the the dom object on which on change even was called.

But as per my understanding this should not work as first argument is expected as "event" (not the "this" object )in event handler method like below

  <select id="customer" onchange="custChange(event);">

can we pass any argument(this or event) in eventHandler method provide their name is correct or first argument will always be considered as event object?

Answer 1

You defined custChange and more importantly: you are calling it. Hence you can decide for yourself which arguments it should accept and in which order. Only for functions that are not called by you, you have to pay attention to the order of arguments.

But if you want to define custChange so that it is compatible with other ways of binding event handlers, i.e.

function custChange(event) {
    // `this` refers to the DOM element
}

then you can call it with

custChange.call(this, event);

Answer 2

I have made a test.

function change(){
    console.info( arguments );
}

<select name="" id="" onchange="change( this, event )">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select>

<select name="" id="" onchange="change( event, this )">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select>

<select name="" id="" onchange="change( this, e )">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select>

I operated selects above one by one, then got console-information below:

• [select, Event]
• [Event, select]
• Uncaught ReferenceError: e is not defined

So, from the results, I got the conclusion that we must pass the correct word in page calling, and could change their position.

Answer 3

The first argument will always be the event.

[edit]You can call your handler with whatever argument you want, the event and this objects being available when called. event refers to the event object, and this refers to the dom object firing the event.[/edit]

However, in the handler event.currentTarget will link back to the object that fired the event:

<script>
    function custChange(event) {
        // event.currentTarget = select element
    }
</script>
<select id="customer" onchange="custChange(event);">