How can we pass an element to event handler in javascript

Question

I have created an <input> HTML element using Javascript. Now I want to add an onblur event handler to this element dynamically. However I do not understand how I can pass the created element as an argument to the function. Here's my code:

element = document.createElement("input");
element.onblur = hello_function;

In the above code you can see that the element is created. Now I want to pass that element to hello_function. How can I do that?

function hello_function(element) {
    alert(element);
}

hello_function.bind(element). Also, I'd suggest you to use .addEventListener instead of .onblur — Rajesh Dixit
– Rajesh Dixit, Commented Nov 15, 2016 at 8:08
You don't need t pass anything? You already can access that element inside the hello_function via this or event.currentTarget. — Bergi
– Bergi, Commented Nov 15, 2016 at 14:01

Rory McCrossan · Accepted Answer · 2016-11-15 08:08:43Z

9

To achieve this you can wrap the hello_function call in an anonymous function wrapper and provide the this argument:

element = document.createElement("input");
element.addEventListener('blur', function() {
  hello_function(this);
});
document.body.appendChild(element);

function hello_function(element) {
  console.log(element);
}

Also note the preferred use of addEventListener over onblur.

answered Nov 15, 2016 at 8:08

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

7 Comments

asprin Over a year ago

Out of curiosity, if I want to access the event object as well inside hello_function(), how would that be passed.

Alexis Over a year ago

@asprin add a additionnal event parameter to the hello_function() and to the addEventListener. Demo jsfiddle.net/xp5we163/82

Rory McCrossan Over a year ago

@aspirin see this question for details

Rory McCrossan Over a year ago

I'm sorry you feel that way. Thankfully this website allows you to add your own answer. Also, I'm looking forward to seeing your use of an arrow function which works reliably in IE, whose support is still a common requirement of most commercial and enterprise level websites.

Bergi Over a year ago

@StephanBijzitter That makes no sense. Of course arrow functions work differently (that's like claiming "bind doesn't work because someone could change it to a call"). Binding it explicitly instead of just dynamically using it will only be less performant, but has no advantages.

|

prasanth · Accepted Answer · 2016-11-15 08:19:48Z

1

try like this. passing the another variable into a function,

var something="hello";
var element = document.createElement("input");
  element.addEventListener('blur' , function ()
                           {
    hello_function(something);
  
  })
 document.body.appendChild(element)

 function hello_function (element){
      alert(element);
}

edited Nov 15, 2016 at 8:19

answered Nov 15, 2016 at 8:14

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Comments

Kevin Kloet · Accepted Answer · 2016-11-15 08:20:35Z

1

i suggest to use addEventListener, also i think you need to append the created element to the document, something like this:

var elem = document.createElement("input");
if (elem) {
  elem.addEventListener('blur', hello_function, false);
}
document.body.append(elem);
function hello_function(element) {
  alert(element);
}

edited Nov 15, 2016 at 8:20

answered Nov 15, 2016 at 8:14

Kevin Kloet

1,0861 gold badge11 silver badges21 bronze badges

Collectives™ on Stack Overflow

How can we pass an element to event handler in javascript

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related