Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #16388 > unrolled thread

event listener

Back to article view | Back to comp.lang.javascript

Contents

  event listener michal <michal.otawa@gmail.com> - 2012-10-04 04:49 -0700
    Re: event listener Martin Honnen <mahotrash@yahoo.de> - 2012-10-04 14:03 +0200
      Re: event listener michal <michal.otawa@gmail.com> - 2012-10-04 05:22 -0700
    Re: event listener Gregor Kofler <usenet@gregorkofler.com> - 2012-10-04 14:07 +0200

#16388 — event listener

Hello,
Could someone help me find problem with event handler on dynamically created input tag. here is code

	var bod = document.getElementById("body");
	var par = document.createElement("p");
	bod.appendChild(par);
	var txt =  document.createTextNode("text 1:");
	par.appendChild(txt);
	var inp = document.createElement("input");
	par.appendChild(inp);
	inp.addEventListener('change',alert("dfd"));

Last line is most important here. I assumed that alert window is triggered ones text is changed in input field but NO this alert is triggered immediately after listener is added and after that don't work I mean don't rise even if text is changed in input field.
What is wrong, how to add listener to input field.

[toc] | [next] | [standalone]

#16389

michal wrote:
> Hello,
> Could someone help me find problem with event handler on dynamically created input tag. here is code
>
> 	var bod = document.getElementById("body");
> 	var par = document.createElement("p");
> 	bod.appendChild(par);
> 	var txt =  document.createTextNode("text 1:");
> 	par.appendChild(txt);
> 	var inp = document.createElement("input");
> 	par.appendChild(inp);
> 	inp.addEventListener('change',alert("dfd"));
>
> Last line is most important here. I assumed that alert window is triggered ones text is changed in input field but NO this alert is triggered immediately after listener is added and after that don't work I mean don't rise even if text is changed in input field.
> What is wrong, how to add listener to input field.

Well as with most languages the arguments in a function (or method) call 
are evaluated first and then the function is called with the evaluated 
arguments so in the case of the call
   inp.addEventListener('change', alert("dfd"))
there are two arguments passed in, the first is a string literal 
('change'), the second is a function call itself (alert("dfd")). So that 
function call is evaluated (that's why you see an alert dialog window) 
and its result (which is undefined) is passed to the addEventListener 
method.

If you want to set an event listener you need to pass in a function 
itself, with Javascript the easiest is by writing an anonymous function
   inp.addEventListener('change', function () { alert("dfd"); }, false);




-- 

	Martin Honnen --- MVP Data Platform Development
	http://msmvps.com/blogs/martin_honnen/

[toc] | [prev] | [next] | [standalone]

#16392

On Thursday, October 4, 2012 2:03:41 PM UTC+2, Martin Honnen wrote:
> michal wrote:
> 
> > Hello,
> 
> > Could someone help me find problem with event handler on dynamically created input tag. here is code
> 
> >
> 
> > 	var bod = document.getElementById("body");
> 
> > 	var par = document.createElement("p");
> 
> > 	bod.appendChild(par);
> 
> > 	var txt =  document.createTextNode("text 1:");
> 
> > 	par.appendChild(txt);
> 
> > 	var inp = document.createElement("input");
> 
> > 	par.appendChild(inp);
> 
> > 	inp.addEventListener('change',alert("dfd"));
> 
> >
> 
> > Last line is most important here. I assumed that alert window is triggered ones text is changed in input field but NO this alert is triggered immediately after listener is added and after that don't work I mean don't rise even if text is changed in input field.
> 
> > What is wrong, how to add listener to input field.
> 
> 
> 
> Well as with most languages the arguments in a function (or method) call 
> 
> are evaluated first and then the function is called with the evaluated 
> 
> arguments so in the case of the call
> 
>    inp.addEventListener('change', alert("dfd"))
> 
> there are two arguments passed in, the first is a string literal 
> 
> ('change'), the second is a function call itself (alert("dfd")). So that 
> 
> function call is evaluated (that's why you see an alert dialog window) 
> 
> and its result (which is undefined) is passed to the addEventListener 
> 
> method.
> 
> 
> 
> If you want to set an event listener you need to pass in a function 
> 
> itself, with Javascript the easiest is by writing an anonymous function
> 
>    inp.addEventListener('change', function () { alert("dfd"); }, false);
> 
> 
> 
> 
> 
> 
> 
> 
> 
> -- 
> 
> 
> 
> 	Martin Honnen --- MVP Data Platform Development
> 
> 	http://msmvps.com/blogs/martin_honnen/

Thanks a lot. It helps. Now it is clear, very good explanation, again many thanks.

[toc] | [prev] | [next] | [standalone]

#16391

Am 2012-10-04 13:49, michal meinte:
 > Hello,
 > Could someone help me find problem with event handler on dynamically 
created input tag. here is code
 >
 > 	var bod = document.getElementById("body");

Is this smart? An element with id "body"?

 > 	var par = document.createElement("p");
 > 	bod.appendChild(par);
 > 	var txt =  document.createTextNode("text 1:");
 > 	par.appendChild(txt);
 > 	var inp = document.createElement("input");
 > 	par.appendChild(inp);
 > 	inp.addEventListener('change',alert("dfd"));
 >
 > Last line is most important here. I assumed that alert window is 
triggered ones text is changed in input field but NO this alert is 
triggered immediately after listener is added and after that don't work 
I mean don't rise even if text is changed in input field.
 > What is wrong, how to add listener to input field.


Correct:
inp.addEventListener("change", function() { window.alert("dfd"); });

In your case you the *return value* of the alert() call becomes the 
addEventListener() argument.


Gregor

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web