By passing this object as an argument in the onChange event?

Question

I want to create an eventHandler that passes the "this" object as a parameter. I tried this

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

It works fine and gets a dom object, through which it is even called for a change.

But according to my understanding, this should not work, since the first argument is expected to be an “event” (and not a “this” object) in the event handler method, as shown below

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

can we pass any argument (this or event) in the eventHandler method so that their name is correct or is the first argument always considered an event object?

Answer 1

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

But if you want to define custChange so that it is compatible with other methods 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

The first argument will always be an event.

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

However, in the event.currentTarget handler event.currentTarget will be a reference to the object that triggered the event:

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

Answer 3

I did 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 worked on the elections one by one, then got the console information below:

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

So, from the results, I came to the conclusion that we must pass the correct word in the page call and change their position.

Answer 4

You can do this according to unobtrusive javaScript:

 $("#customer").on("change", function () { ... and here you have $(this) object linked to 'customer' select }); 

Answer 5

Maybe you can do it like this:

 <p><a id="link" href="#">click me</a></p> <script> var link = document.getElementById("link"); AttachEvent(link, "click", EventHandler); function AttachEvent(element, type, handler) { if (element.addEventListener) element.addEventListener(type, handler, false); else element.attachEvent("on"+type, handler); } 

Hope this helps.