addEventListener event handler

addEventListener not working

Page 1 of 1

3 Replies - 7830 Views - Last Post: 10 September 2009 - 04:43 PM

#1 sudriptac  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 27-June 09

addEventListener event handler

Post icon  Posted 08 September 2009 - 11:19 PM

Hi,
I am trying to explore the use of the 'addEventListener()' javascript event handler function. Below is the html/javascript code that I have written.
What I am trying to do is very simple... I am creating a form-input checkbox and display the alert "addEventListener Invoked !!" whenever the checkbox is clicked
The addeventlistener is supposed to monitor the checkbox for an 'onclick' event and display a alert pop-up whenever the checkbox is Clicked
What is happening is, when the html file with this code is opened in firefox or IE, the alert message is displayed immediately when the html page loads; and on clicking on the checkbox nothing happens :(

Now let me clarify, one might suggest to use the simple
onclick=alert("xyz")
in
<input type="checkbox" id="check"/>
tag....

However, I want to implement this simple thing using addEventListener function...

So Gurus, it would be of great help if you can point out what is wrong with the below scrpit..
PS: I am a complete beginer in Javascript..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
	<title>test</title>
  </head>
  <body><form>
	  <p>
		<input type="checkbox" id="check" />
	  </p>
	</form><script type="text/javascript">
document.getElementById("check").addEventListener("onclick",alert("addEventListner Invoked !!"), false)
</script></body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: addEventListener event handler

#2 destructo  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 32
  • Joined: 05-July 09

Re: addEventListener event handler

Posted 09 September 2009 - 01:22 AM

You can try something like this...

<input type="checkbox" id="check" onclick="alert('box checked');" />



Everytime the box is checked the message "box checked" is displayed.

This post has been edited by destructo: 09 September 2009 - 01:24 AM

Was This Post Helpful? 0
  • +
  • -

#3 musya  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 11
  • View blog
  • Posts: 1,012
  • Joined: 25-April 07

Re: addEventListener event handler

Posted 09 September 2009 - 01:29 PM

I think his goal was to use an event listener, I don't know what could be causing it but hopefully somebody else does.
Was This Post Helpful? 0
  • +
  • -

#4 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: addEventListener event handler

Posted 10 September 2009 - 04:43 PM

hi,

Quote

document.getElementById("check").addEventListener("onclick",alert("addEventListner Invoked !!"), false)


the way you did here will execute the alert() as you're adding the listener
you have to add a reference to an existing function or use anonymous function, something like this:
function reference:
document.getElementById("check").addEventListener("click",myFunc, false)

function myFunc(){
alert("addEventListner Invoked !!");
}



Anonymous function
document.getElementById("check").addEventListener("click",function(){alert("addEventListner Invoked !!")}, false)



note:
1-when running in Fire Fox the click event is "click"
2-when running in Internet Explorer you have to use attachEvent instead of addEventListner, and the click event will be "onclick"

hope it helps

This post has been edited by ahmad_511: 10 September 2009 - 04:46 PM

Was This Post Helpful? 1

Page 1 of 1