Jump to content

traditional event model - puzzled


Drongo_III
Go to solution Solved by kicken,

Recommended Posts

Hi Guys

 

I have been a jquery junky for a bit too long and neglected much of the raw javascript behind it...hence this simple question.

 

When I try to register an event in the format of :

element.onclick = funcName;

the only way I can get this to work is with:

document.getElementById('elementId').onclick = myFunc;

Whereas if I try and give this event a handle (below) it doesn't work at all and I get an 'undefined' error in console even though it plainly is defined. But surely these two statements amount to exactly the same thing? 

var someElement = document.getElementById('elementId');

someElement.onclick = myFunc;   // This doesn't work

So what am i missing?

 

Thanks,

 

Drongo

Edited by Drongo_III
Link to comment
Share on other sites

This should work.

http://jsfiddle.net/6eJuB/

 

window.document.querySelector("#elmId").addEventListener("click", myFunc, false);

 

 

Thanks for that. But it wasn;t so much that I couldnt get the event to work, or that I couldn't register the event in another way. What I was driving at is to try and understand why it works with document.getElementById but not when I simply use a resource (i.e. set a var with document.getElement... and then assign it to the event). Any ideas why that may be?

Link to comment
Share on other sites

Thanks for that. But it wasn;t so much that I couldnt get the event to work, or that I couldn't register the event in another way. What I was driving at is to try and understand why it works with document.getElementById but not when I simply use a resource (i.e. set a var with document.getElement... and then assign it to the event). Any ideas why that may be?

http://jsfiddle.net/6eJuB/1/

Link to comment
Share on other sites

Most likely you tried to call the getElementById before the page loads or before the element is on the page.

 

 

Perhaps you can point out where i'm doing it wrong?  The below code doesn't work. 

<!doctype html>
<html>
<head>
	
	<script type="text/javascript">
	
		var mylink;
		
		function init(){
		
			mylink = document.getElementById('link1');
			alert(mylink.id);
			myLink.onclick = myFunc;
		}
		
		function myFunc(){
		
			alert('click worked');
		}
				
	</script>

	

</head>

<body onload="init();">

	<a href="#" id="link1">Click me</a>
	
	
</body>
</html>

But if I replace that init function with a direct call to document.getElement (as per below) it works fine. So I am just trying to understand either what I am doing wrong or whether there is some fundamental precept of javascript i am missing (probable)...

 


		function init(){
		
			//mylink = document.getElementById('link1');
			//alert(mylink.id);
			document.getElementById('link1').onclick = myFunc;
		}

 

 

 

And thanks for this mate but this is a different type of event registration. I am trying to work out why the traditional model doesnt seem to work for me

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.