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, Nov 15 '16 at 08:08
You don't need t pass anything? You already can access that element inside the `hello_function` via `this` or `event.currentTarget`. — Bergi, Nov 15 '16 at 14:01

score 9 · Accepted Answer · answered Nov 15 '16 at 08:08

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 '16 at 08:08

Rory McCrossan

331,213
40
305
339

Out of curiosity, if I want to access the `event` object as well inside `hello_function()`, how would that be passed. – asprin Nov 15 '16 at 08:18
2

@asprin add a additionnal event parameter to the hello_function() and to the addEventListener. Demo https://jsfiddle.net/xp5we163/82/ – Alexis Nov 15 '16 at 08:20
So it would be `hello_function(event, this);` and declaration would be `function hello_function(evt, element){....}`? – asprin Nov 15 '16 at 08:22
2

@aspirin see [this question](http://stackoverflow.com/questions/10000083/javascript-event-handler-with-parameters) for details – Rory McCrossan Nov 15 '16 at 08:23
Downvoted because it's ambiguous. `this` has the correct value today, but if someone uses an arrow-function, it will not work. You have the opportunity to explicitly bind the element to the function, do it. – Stephan Bijzitter Nov 15 '16 at 12:24
3

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. – Rory McCrossan Nov 15 '16 at 12:34
1

@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. – Bergi Nov 15 '16 at 14:03

prasanth · Answer 2 · 2016-11-15T08:19:48.980

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 '16 at 08:19

answered Nov 15 '16 at 08:14

prasanth

22,145
4
29
53

Kevin Kloet · Answer 3 · 2016-11-15T08:20:35.107

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 '16 at 08:20

answered Nov 15 '16 at 08:14

Kevin Kloet

1,086
1
11
21

How can we pass an element to event handler in javascript

3 Answers3