如何用JavaScript设置onClick？

Question

I am trying to set the onclick event using javascript. The following code works:

var link = document.createElement('a');
link.setAttribute('href', "#");
link.setAttribute('onclick', "alert('click')");

I then use appendChild to add link to the rest of the document.

But I obviously would like a more complicated callback than alert, so I tried this:

link.onclick = function() {alert('clicked');};

and this:

link.onclick = (function() {alert('clicked');});

But that does nothing. When I click the link, nothing happens. I have testing using chrome and browsing the DOM object shows me for that element that the onclick attribute is NULL.

Why am I not able to pass a function into onclick?

EDIT:

I tried using addEventListener as suggested below with the same results. The DOM for the link shows onclick as null.

My problem may be that the DOM for this element might not have been fully built yet. At this point the page has been loaded and the user clicks a button. The button executes javascript that builds up a new div that it appends to the page by calling document.body.appendChild. This link is a member of the new div. If this is my problem, how do I work around it?

Answer 1

I have been unable to reproduce the problem. Contrary to the OP's findings, the line below works fine on the latest versions of IE, FF, Opera, Chrome and Safari.

link.onclick = function() {alert('clicked');};

You can visit this jsFiddle to test on your own browser:

http://jsfiddle.net/6MjgB/7/

Assuning we have this in the html page:

<div id="x"></div>

The following code works fine on the browsers I have tried it with:

var link = document.createElement('a');
link.appendChild(document.createTextNode("Hi"));
link.setAttribute('href', "#");
link.onclick= function() {link.appendChild(document.createTextNode("Clicked"));}

document.getElementById("x").appendChild(link);

If there is a browser compatibility issue, using jQuery should solve it and make code much much more concise:

var $link = $("<a>").html("Hi").attr("href","#").click(function (){$link.html("Clicked")})

$("#x").html($link)

If brevity is not a strong enough argument for using jQuery, browser compatibility should be... and vise versa:-)

NOTE: I am not using alert() in the code because jsFiddle does not seem to like it:-(

Answer 2

If you're doing this with JavaScript, then use addEventListener() , with addEventListener('click', function(e) {...}) to get the event stored as e . If you don't pass in the event like this, it will not be accessible (although Chrome appears to be smart enough to figure this out, not all browsers are Chrome).

Full Working JSBin Demo.

StackOverflow Demo...

 document.getElementById('my-link').addEventListener('click', function(e) { console.log('Click happened for: ' + e.target.id); });

 <a href="#" id="my-link">Link</a>

Answer 3

You can add a DOM even listener with addEventListener(...) , as David said. I've included attachEvent for compatibility with IE.

var link = document.createElement('a');
link.setAttribute('href', "#");
if(link.addEventListener){
   link.addEventListener('click', function(){
      alert('clicked');
   });
}else if(link.attachEvent){
   link.attachEvent('onclick', function(){
      alert('clicked');
   });
}

Answer 4

Setting an attribute doesn't look right. The simplest way is just this:

link.onclick = function() {
    alert('click');
};

But using addEventListener as JCOC611 suggested is more flexible, as it allows you to bind multiple event handlers to the same element. Keep in mind you might need a fallback to attachEvent for compatibility with older Internet Explorer versions.

Answer 5

Use sth like this if you like:

<button id="myBtn">Try it</button>
<p id="demo"></p>

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};

function displayDate()
{
    document.getElementById("demo").innerHTML=Date();
}
</script>